jquery实现边框特效
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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 class="lazy" data-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)
});以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341