脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery边框特效

jquery实现边框特效

 更新时间：2022年01月20日 10:55:52   作者：我叫陈小皮。  
这篇文章主要为大家详细介绍了jquery实现边框特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jquery实现边框特效的具体代码，供大家参考，具体内容如下

主要思想

1.将四个div分别定位到大div的上下左右位置
2.分别设置成宽度为0或者高度为0
3.让其执行给定动画，即多少毫秒让宽度或者高度变为指定的长度

html代码

<div class="box">
    <div class="border_top"></div>
    <div class="border_bottom"></div>
    <div class="border_left"></div>
    <div class="border_right"></div>
</div>

css代码

.box{
        width:234px;
        height:300px;
        position:relative;
}
.border_bottom,.border_left,.border_right,.border_top{
    background: #ff6700;
    position: absolute;
    font-size: 0px;
    transition: all 0.5s ease-out;
    z-index: 99;
}
.border_bottom,.border_top{
    height: 1px;
    width: 0px;
}
.border_right,.border_left{
    height: 0px;
    width: 1px;
}
.border_top {
    top:0px;
    left:0px;
}
.border_right {
    top:0px;
    right:0px;
}
.border_bottom {
    right: 0px;
    bottom: 0px;
}
.border_left {
    left: 0px;
    bottom: 0px;
}

js实现效果

1.引入jquery文件

<script src="jquery-1.8.3.min.js"></script>

2.jquery代码

$('.main>li').hover(function(){
    var index=$(this).index();
    $(".border_top").stop(true,true);
    $(".border_left").stop(true,true);
    $(".border_bottom").stop(true,true);
    $(".border_right").stop(true,true);
    $(".border_top").eq(index).animate({width:"234px"},100)
    $(".border_left").eq(index).animate({height:"300px"},100)
    $(".border_bottom").eq(index).animate({width:"234px"},100)
    $(".border_right").eq(index).animate({height:"300px"},100)
},function(){
    var index=$(this).index();
    $(".border_top").stop(true,true);
    $(".border_left").stop(true,true);
    $(".border_bottom").stop(true,true);
    $(".border_right").stop(true,true);
    $(".border_top").eq(index).animate({width:"0"},100)
    $(".border_left").eq(index).animate({height:"0"},100)
    $(".border_bottom").eq(index).animate({width:"0"},100)
    $(".border_right").eq(index).animate({height:"0"},100)
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论