jQuery實(shí)現(xiàn)邊框動(dòng)態(tài)效果的實(shí)例代碼
更新時(shí)間：2016年09月23日 11:50:27 投稿：daisy
這篇文章給大家分享了一個(gè)jQuery邊框動(dòng)態(tài)的效果，當(dāng)鼠標(biāo)移動(dòng)到邊框區(qū)域的時(shí)候，邊框會(huì)有個(gè)動(dòng)態(tài)的加載動(dòng)畫效果，實(shí)現(xiàn)的效果真的非常不錯(cuò)，下面來一起看看吧。
話不多說、靜態(tài)效果圖如下
實(shí)代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.myDiv{
width: 300px;
height: 200px;
border: 1px solid rgba(0,0,0,0.2);
margin: 50px ;
position: relative;
}
.topLine{
width: 0px;
height: 1px;
background: black;
position:absolute;
left: 0;
top: -1px;
}
.bottomLine{
width: 0px;
height: 1px;
background: black;
position:absolute;
left: 0;
bottom: -1px;
}
.leftLine{
width: 1px;
height: 0px;
background: black;
position:absolute;
left: -1;
bottom: -1px;
}
.rightLine{
width: 1px;
height: 0px;
background: black;
position:absolute;
right: -1px;
top: -1px;
}
</style>
</head>
<body>
<div class="myDiv">
<div class="topLine"></div>
<div class="rightLine"></div>
<div class="bottomLine"></div>
<div class="leftLine"></div>
</div>
<div class="myDiv">
<div class="topLine"></div>
<div class="rightLine"></div>
<div class="bottomLine"></div>
<div class="leftLine"></div>
</div>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>
<script>
$(function(){
$(".myDiv").mouseover(function(){
$(this).find(".topLine,.bottomLine").stop().animate({"width":"300px"});
$(this).find(".rightLine,.leftLine").stop().animate({"height":"200px"});
})
$(".myDiv").mouseout(function(){
$(this).find(".topLine,.bottomLine").stop().animate({"width":"0px"});
$(this).find(".rightLine,.leftLine").stop().animate({"height":"0px"});
})
})
</script>
</body>
</html>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，剛興趣的朋友們可以自己動(dòng)手操作下看看動(dòng)態(tài)效果，真的非常不錯(cuò)，希望對(duì)大家的學(xué)習(xí)或者工作能有一定的幫助。如果有疑問大家可以留言交流，小編會(huì)盡快給大家回復(fù)。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示動(dòng)畫邊框特效
- jquery插件corner實(shí)現(xiàn)圓角邊框的方法
- JQuery拖動(dòng)表頭邊框線調(diào)整表格列寬效果代碼
- JQuery實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片上顯示邊框效果
- jquery給圖片添加鼠標(biāo)經(jīng)過時(shí)的邊框效果
- jQuery 淡入淡出 png圖在ie8下有黑色邊框的解決方法
- jquery photoFrame 圖片邊框美化顯示插件
- jquery(1.3.2) 高亮選中圖片邊框
- jquery實(shí)現(xiàn)邊框特效
相關(guān)文章
jquery——九宮格大轉(zhuǎn)盤抽獎(jiǎng)實(shí)例
本篇文章主要介紹了jquery——九宮格大轉(zhuǎn)盤抽獎(jiǎng)實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
本篇文章是對(duì)jquery獲取父窗口元素的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
jQuery實(shí)現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法【經(jīng)典】
這篇文章主要介紹了jQuery實(shí)現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法,可實(shí)現(xiàn)在彈出層外任意位置點(diǎn)擊關(guān)閉彈出層的功能,涉及jQuery事件操作方法,包含了詳盡的代碼功能說明,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-06-06
jQuery學(xué)習(xí)筆記之基礎(chǔ)中的基礎(chǔ)
本文是jQuery學(xué)習(xí)筆記系列文章的第一篇，跟大多數(shù)開篇文章一樣，我們來講解下jQuery最基礎(chǔ)的東西，希望大家能夠喜歡。2015-01-01
jQuery實(shí)現(xiàn)手機(jī)自定義彈出輸入框
這篇文章主要介紹了jQuery實(shí)現(xiàn)手機(jī)自定義彈出輸入框 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
jquery獲取一組checkbox的值(實(shí)例代碼)
使用jquery獲取一組checkbox的值實(shí)例代碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
jQuery如何獲取同一個(gè)類標(biāo)簽的所有值(默認(rèn)無法獲取)
jQuery總是只返回第一個(gè)類標(biāo)簽的值，所以無法達(dá)到我們的要求，那么jQuery如何獲取同一個(gè)類標(biāo)簽的所有的值，下面與大家分享方法2014-09-09
用JavaScript解析XML數(shù)據(jù)是常見的編程任務(wù)，JavaScript能做的，JQuery當(dāng)然也能做。下面我們來總結(jié)幾個(gè)使用JQuery解析XML的例子2014-03-03
jQuery實(shí)現(xiàn)首頁(yè)頂部可伸縮廣告特效代碼
一套使用jQuery 插件實(shí)現(xiàn)的廣告特效代碼,其效果類似全屏廣告,打開網(wǎng)頁(yè)后在網(wǎng)頁(yè)的第一屏顯示大幅廣告,停留幾秒后慢慢伸縮至標(biāo)準(zhǔn)小圖片顯示在網(wǎng)頁(yè)預(yù)留位置上，效果非常不錯(cuò)，這里推薦給大家。2015-04-04
這篇文章主要介紹了jQuery on()方法使用技巧詳解,本文講解了trigger()綁定、多個(gè)事件綁定同一個(gè)函數(shù)、多個(gè)事件綁定不同函數(shù)、綁定自定義事件、傳遞數(shù)據(jù)到函數(shù)等技巧,需要的朋友可以參考下2015-04-04