jQuery實現邊框動態(tài)效果的實例代碼
更新時間：2016年09月23日 11:50:27 投稿：daisy
這篇文章給大家分享了一個jQuery邊框動態(tài)的效果，當鼠標移動到邊框區(qū)域的時候，邊框會有個動態(tài)的加載動畫效果，實現的效果真的非常不錯，下面來一起看看吧。
話不多說、靜態(tài)效果圖如下
實代碼如下
<!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>
總結
以上就是這篇文章的全部內容了，剛興趣的朋友們可以自己動手操作下看看動態(tài)效果，真的非常不錯，希望對大家的學習或者工作能有一定的幫助。如果有疑問大家可以留言交流，小編會盡快給大家回復。
相關文章
這篇文章主要介紹了jQuery實現的選擇商品飛入文本框動畫效果,結合完整實例形式分析了jQuery動態(tài)操作頁面元素屬性實現動畫效果的方法,涉及jQuery的事件綁定、元素遍歷及屬性操作等相關技巧,需要的朋友可以參考下2016-08-08
jQuery實現右側顯示可向左滑動展示的深色QQ客服效果代碼
這篇文章主要介紹了jQuery實現右側顯示可向左滑動展示的深色QQ客服效果代碼,涉及jQuery控制頁面元素樣式動態(tài)變換的實現技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
下面小編就為大家?guī)硪黄猨query 遍歷數組 each 方法詳解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了jQuery實現的多屏圖像圖層切換效果,可實現多個圖層的點擊切換效果,設計jQuery鼠標事件及樣式的操作技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了jQuery對于顯示和隱藏等常用狀態(tài)的判斷方法,給出了兩種較為常用的判斷方法,非常具有實用價值,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細介紹了jquery ui sortable拖拽后保存位置的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
本篇文章主要是對使用jQuery簡單實現banner圖片切換的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了bootstrap+jquery項目引入文件的常見報錯問題，下面小編給大家?guī)砹艘恍╁e誤及錯誤的解決方法,需要的朋友可以參考下2018-01-01
日常生活中用手機，電腦瀏覽網頁時，滑到了頁面下端后想返回頂部 或 跳轉到頁面別的版塊，用鼠標滾動很麻煩，網頁電梯導航就可以很方便的精準到達目標版塊，本文給大家分享jquery電梯導航案例詳解，感興趣的朋友一起看看吧2022-05-05
這篇文章主要介紹了jQuery實現點擊小圖顯示大圖效果，功能實現非常簡單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08