日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

jquery實現(xiàn)邊框特效_jquery

作者：我叫陳小皮。 ? 更新時間： 2022-04-02 編程語言

本文實例為大家分享了jquery實現(xiàn)邊框特效的具體代碼，供大家參考，具體內(nèi)容如下

主要思想

1.將四個div分別定位到大div的上下左右位置
2.分別設(shè)置成寬度為0或者高度為0
3.讓其執(zhí)行給定動畫，即多少毫秒讓寬度或者高度變?yōu)橹付ǖ拈L度

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實現(xiàn)效果

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)
});

原文鏈接：https://blog.csdn.net/m0_37805167/article/details/72236564

欄目分類
最近更新