欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示動(dòng)畫(huà)邊框特效

 更新時(shí)間：2017年03月24日 11:46:30   作者：來(lái)個(gè)茄子吧  
本文主要介紹了jQuery鼠標(biāo)經(jīng)過(guò)顯示動(dòng)畫(huà)邊框特效的實(shí)例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

原效果用addClass 改為slideUp，純學(xué)習(xí)

效果圖：

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" type="text/css" href="css.css" rel="external nofollow" >
 <title>Document</title>
</head>
<body>
 <style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#000;text-decoration: none;font-weight: 600}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
.sph{
 width: 1300px;
 margin: 0 auto;
 padding: 100px 0;
}
.spbq{
 width: 250px;
 height: 250px;
 float: left;
 line-height: 2;
 padding: 10px 10px 0 20px;
 margin: 20px;
 position: relative;
 overflow: hidden;
}
.spbq h2{
 color: #14191e;
 font: bold 14px/18px "Microsoft Yahei","Hiragino Sans GB",Helvetica,"微軟雅黑",Tahoma,Arial,sans-serif;
 margin-top: 18px;
}
.spbq span{
 display: block;
 color: #b4bbbf;
 font: 12px/18px "Microsoft Yahei","Hiragino Sans GB",Helvetica,"微軟雅黑",Tahoma,Arial,sans-serif;
 margin: 8px 0;
}
.spbq b{
 color: #787d82;
 font: 12px/18px "Microsoft Yahei","Hiragino Sans GB",Helvetica,"微軟雅黑",Tahoma,Arial,sans-serif;
}
.biankuang{
 width: 3px;
 height: 3px;
 position: absolute;
 z-index: 99;
 border-radius:10px;
 /*background: black;*/
}
.biankuang_1{
 height: 3px;
 top: -6px;
 left:0px;
 border-left: 3px solid #EB5858;
}
.biankuang_2 {
 width: 0px;
 bottom:-3px;
 left: 0px;
 border-top: 3px solid #EB5858;
}
.biankuang_3{
 height: 0px;
 bottom:0px;
 right:0px;
 border-right: 3px solid #EB5858;
}
.biankuang_4{
 width:0px;
 top:-3px;
 right:0px;
 border-bottom: 3px solid #EB5858;
}
.text_gobuy {
 position: absolute;
 z-index: 9;
 bottom: 0;
 left: 0px;
 width: 280px;
 height: 50px;
 overflow: hidden;
 background-color: rgba(32, 32, 33,0.5);
 cursor: pointer;
 display: none;
 text-align: center;
}
.text_gobuy_show{
padding: 20px 15px ;
opacity: 1;
}
.spbq p{
 position: absolute;
 bottom:10px;
 left:110px;
 line-height: 33px;
 color: #fff
}
</style>
</head>
<body>
<div class="sph">
 <div class="spbq">
 <div class="biankuang biankuang_1"></div>
 <div class="biankuang biankuang_2"></div>
 <div class="biankuang biankuang_3"></div>
 <div class="biankuang biankuang_4"></div>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><div class="zst"><img src="http://www.jq22.com/demo/jQuery-hover20161208/images/0-135.jpg" alt=""></div><h2>jQuery基礎(chǔ)課程</h2><span>讓jQuery帶您進(jìn)入網(wǎng)頁(yè)動(dòng)態(tài)交互世界，為...</span><b>更新完畢 &nbsp;&nbsp;&nbsp;15783人學(xué)習(xí)</b></a>
 <div class="text_gobuy">
  <br/>
  <p>9小時(shí)17分鐘 | 初級(jí)</p>
  <br/>
 </div>
 </div>
 <div class="spbq">
 <div class="biankuang biankuang_1"></div>
 <div class="biankuang biankuang_2"></div>
 <div class="biankuang biankuang_3"></div>
 <div class="biankuang biankuang_4"></div>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><div class="zst"><img src="http://www.jq22.com/demo/jQuery-hover20161208/images/0-135.jpg" alt=""></div><h2>jQuery基礎(chǔ)課程</h2><span>讓jQuery帶您進(jìn)入網(wǎng)頁(yè)動(dòng)態(tài)交互世界，為...</span><b>更新完畢 &nbsp;&nbsp;&nbsp;15783人學(xué)習(xí)</b></a>
 <div class="text_gobuy">
  <br/>
  <p>9小時(shí)17分鐘 | 初級(jí)</p>
  <br/>
 </div>
 </div> 
 <div class="spbq">
 <div class="biankuang biankuang_1"></div>
 <div class="biankuang biankuang_2"></div>
 <div class="biankuang biankuang_3"></div>
 <div class="biankuang biankuang_4"></div>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><div class="zst"><img src="http://www.jq22.com/demo/jQuery-hover20161208/images/0-135.jpg" alt=""></div><h2>jQuery基礎(chǔ)課程</h2><span>讓jQuery帶您進(jìn)入網(wǎng)頁(yè)動(dòng)態(tài)交互世界，為...</span><b>更新完畢 &nbsp;&nbsp;&nbsp;15783人學(xué)習(xí)</b></a>
 <div class="text_gobuy">
  <br/>
  <p>9小時(shí)17分鐘 | 初級(jí)</p>
  <br/>
 </div>
 </div>
 <div class="spbq">
 <div class="biankuang biankuang_1"></div>
 <div class="biankuang biankuang_2"></div>
 <div class="biankuang biankuang_3"></div>
 <div class="biankuang biankuang_4"></div>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><div class="zst"><img src="http://www.jq22.com/demo/jQuery-hover20161208/images/0-135.jpg" alt=""></div><h2>jQuery基礎(chǔ)課程</h2><span>讓jQuery帶您進(jìn)入網(wǎng)頁(yè)動(dòng)態(tài)交互世界，為...</span><b>更新完畢 &nbsp;&nbsp;&nbsp;15783人學(xué)習(xí)</b></a>
 <div class="text_gobuy">
  <br/>
  <p>9小時(shí)17分鐘 | 初級(jí)</p>
  <br/>
 </div>
 </div>
</div>  
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 
<script type="text/javascript">
function biankuang(obj) {
  $(obj).find('.biankuang_1').stop(true).animate({
      height: '305px'
    },
    300)
  $(obj).find('.biankuang_2').stop(true).delay('300').animate({
      width: '305px'
    },
    300)
  $(obj).find('.biankuang_3').stop(true).animate({
      height: '305px'
    },
    300)
  $(obj).find('.biankuang_4').stop(true).delay('300').animate({
      width: '305px'
    },
    300)
}
function biankuang1(obj) {
  $(obj).find('.biankuang_1').animate({
      height: '0'
    },
    100)
  $(obj).find('.biankuang_2').animate({
      width: '0'
    },
    100)
  $(obj).find('.biankuang_3').animate({
      height: '0'
    },
    100)
  $(obj).find('.biankuang_4').animate({
      width: '0'
    },
    100)
}
$('.spbq').hover(function() {
  var obj = $(this);
  obj.find('.text_gobuy').slideDown(300);
  biankuang(obj);
}, function() {
  var obj = $(this);
  obj.find('.text_gobuy').slideUp(300);
  biankuang1(obj);
})
</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

相關(guān)文章

最新評(píng)論