jQuery實現(xiàn)邊框動態(tài)效果的實例代碼
更新時間：2016年09月23日 11:50:27 投稿：daisy
這篇文章給大家分享了一個jQuery邊框動態(tài)的效果，當鼠標移動到邊框區(qū)域的時候，邊框會有個動態(tài)的加載動畫效果，實現(xiàn)的效果真的非常不錯，下面來一起看看吧。
話不多說、靜態(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——九宮格大轉盤抽獎實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
本篇文章是對jquery獲取父窗口元素的實現(xiàn)方法進行了詳細的分析介紹，需要的朋友參考下2013-06-06
jQuery實現(xiàn)指定區(qū)域外單擊關閉指定層的方法【經典】
這篇文章主要介紹了jQuery實現(xiàn)指定區(qū)域外單擊關閉指定層的方法,可實現(xiàn)在彈出層外任意位置點擊關閉彈出層的功能,涉及jQuery事件操作方法,包含了詳盡的代碼功能說明,非常簡單實用,需要的朋友可以參考下2016-06-06
本文是jQuery學習筆記系列文章的第一篇，跟大多數(shù)開篇文章一樣，我們來講解下jQuery最基礎的東西，希望大家能夠喜歡。2015-01-01
這篇文章主要介紹了jQuery實現(xiàn)手機自定義彈出輸入框 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
使用jquery獲取一組checkbox的值實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
jQuery總是只返回第一個類標簽的值，所以無法達到我們的要求，那么jQuery如何獲取同一個類標簽的所有的值，下面與大家分享方法2014-09-09
用JavaScript解析XML數(shù)據(jù)是常見的編程任務，JavaScript能做的，JQuery當然也能做。下面我們來總結幾個使用JQuery解析XML的例子2014-03-03
一套使用jQuery 插件實現(xiàn)的廣告特效代碼,其效果類似全屏廣告,打開網頁后在網頁的第一屏顯示大幅廣告,停留幾秒后慢慢伸縮至標準小圖片顯示在網頁預留位置上，效果非常不錯，這里推薦給大家。2015-04-04
這篇文章主要介紹了jQuery on()方法使用技巧詳解,本文講解了trigger()綁定、多個事件綁定同一個函數(shù)、多個事件綁定不同函數(shù)、綁定自定義事件、傳遞數(shù)據(jù)到函數(shù)等技巧,需要的朋友可以參考下2015-04-04