jQuery實現的滑鼠滑過圖片上縮彈出文字說明程式碼例項

antzone發表於2017-03-03
jQuery

不少圖片型別的網站或者圖片相對較多的網站為了起到比較好的美觀或者實用化效果，當滑鼠滑過圖片的時候，一般會彈出一定的文字說明，用語對圖片等相關主題進行描述，彈出形式多種多樣，本章節分享一段，當滑鼠滑過圖片能夠實現圖片上縮，出現文字說明的效果,程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.holder{
  overflow:hidden;
  width:320px;
  height:333px;
  float:left;
  position:relative;
  background-color:#000;
  margin-right:1px;
}
.holder .image{
  position:absolute;
  left:-100px;
}
.holder span{
  background-color:#333;
  font-size:27px;
  font-family:Arial, Helvetica, sans-serif;
  color:#dedede;
  font-weight:700;
  padding:4px;
  position:absolute;
  top:120px;
  left:4px;
}
.holder .text{
  padding:20px;
  display:none;
  font-family:Arial, Helvetica, sans-serif;
  line-height:26px;
  position:absolute;
  top:180px;
  font-size:16px;
  color:#fff;
  width:340px;
}
.clear{clear: both;}
.main{
  width:1000px;
  height:333px;
  margin:0 auto;
  overflow:hidden;
}
.credit{
  font-size:12px;
  margin-top:25px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $('.holder').hover(function(){
    $(this).removeClass('.notactive'); 
    $('.notactive').stop().animate({'width':'290px'},400); 
    $(this).find('img').stop().animate({'top':'-165px'},400); 
    $(this).stop().animate({'width':'380px'},400); 
    $(this).find('span').css({'background-color':'#000'}); 
    $(this).find('.text').fadeIn(300); 
  },
  function(){
    $('.notactive').stop().animate({'width':'320px'},400); 
    $(this).addClass('.notactive'); 
    $(this).find('.text').hide();
    $(this).find('img').stop().animate({'top':'0px'},500); 
    $(this).stop().animate({'width':'320px'},400);
    $(this).find('span').css({'background-color':'#333', 'color':'#dedede'}); 
  });
});
</script>
</head>
<body>
<div class="main">
  <div class="holder notactive">
    <img class="image" src="mytest/demo/cite.jpg" height=""/>
    <span>自然風光</span>
    <div class="text">愛護自然就是愛護我們自己</div>
  </div>
  <div class="clear"></div>
</div>
</body>
</html>

相關文章