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

更新時(shí)間：2022年01月20日 10:55:52 作者：我叫陳小皮。

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)邊框特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

主要思想

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

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實(shí)現(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)
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery插件hiAlert實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)話(huà)框美化
hiAlert是一款基于jQuery的信息提示插件，它支持操作成功、操作失敗和操作提醒三種信息提示方式。hiAlert瀏覽器兼容性非常好，支持更改提示內(nèi)容，支持定位提示框的位置，可配置插件參數(shù)。
2015-05-05
jquery下異步提交表單異步跨域提交表單
基于jquery的實(shí)現(xiàn)異步跨域提交表單的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2010-11-11
jquery合并表格中相同文本的相鄰單元格
這篇文章主要介紹了jquery合并表格中相同文本的相鄰單元格的相關(guān)資料,需要的朋友可以參考下
2015-07-07
基于jquery實(shí)現(xiàn)彩色投票進(jìn)度條代碼解析
這篇文章主要介紹了基于jquery實(shí)現(xiàn)彩色投票進(jìn)度條代碼解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08
jQuery trigger()方法用法介紹
這篇文章主要介紹了jQuery trigger()方法用法介紹,trigger()方法可以觸發(fā)匹配元素上指定類(lèi)型的事件,本文講解它的使用語(yǔ)法,需要的朋友可以參考下
2015-01-01
jQuery AJAX實(shí)現(xiàn)調(diào)用頁(yè)面后臺(tái)方法和web服務(wù)定義的方法分享
jQuery AJAX實(shí)現(xiàn)調(diào)用頁(yè)面后臺(tái)方法和web服務(wù)定義的方法分享，需要的朋友可以參考下
2012-03-03
jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦)
這篇文章主要介紹了jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
從零開(kāi)始學(xué)習(xí)jQuery (六) jquery中的AJAX使用
本篇文章講解如何使用jQuery方便快捷的實(shí)現(xiàn)Ajax功能.統(tǒng)一所有開(kāi)發(fā)人員使用Ajax的方式.
2011-02-02
jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)添加表格tr td功能示例
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)添加表格tr td功能,結(jié)合實(shí)例形式分析了jQuery基于ajax動(dòng)態(tài)創(chuàng)建頁(yè)面table元素相關(guān)操作技巧,需要的朋友可以參考下
2018-04-04
jQuery實(shí)現(xiàn)鼠標(biāo)移到某個(gè)對(duì)象時(shí)彈出顯示層功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)移到某個(gè)對(duì)象時(shí)彈出顯示層功能,涉及jQuery基于事件響應(yīng)動(dòng)態(tài)操作頁(yè)面元素屬性相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-08-08