jquery實現的具有漸變效果的圖片切換

admin發表於2017-04-01
jQuery

本章節分享一段程式碼例項，實現了圖片的切換效果，這裡不管是背景圖片還是其他什麼樣的切換效果。總之具有漸變效果的切換更為柔和，當然使用者使用起來也更加人性化，下面就是一段具有此特性的程式碼。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul.gallery{
  width:750px;
  list-style:none;
  margin:0; 
  padding 0;
}
ul.gallery li{
  float:left;
  margin:10px 0 10px 25px; 
  padding:0;
  text-align:center;
  border:1px solid #ccc;
  -moz-border-radius:3px;
  -khtml-border-radius:3px;
  -webkit-border-radius:3px; 
  display: inline; 
}
ul.gallery li a.thumb {
  width:336px;
  height:240px;
  border-bottom:1px solid #ccc;
  cursor:pointer;
}
ul.gallery li span {
  width:336px;
  height:240px;
  overflow:hidden;
  display:block;
}
ul.gallery li a.thumb:hover {
  background:#333;
}
ul.gallery li h2{
  font-weight:normal;
  margin:0; 
  padding:10px;
  background:#f0f0f0;
  border-top:1px solid #fff;
}
ul.gallery li a{ 
  text-decoration:none; 
  color:#777; 
  display:block;
  font-size:140%;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("ul.gallery li").hover(function() {
    var thumbOver = $(this).find("img").attr("src");
    $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
    $(this).find("span").stop().fadeTo('normal', 0 , function() {
      $(this).hide()
    });
  } , function(){
    $(this).find("span").stop().fadeTo('normal', 1).show();
  });
});
</script>
</head>
<body>
<ul class="gallery">
 <li>
  <a href="#" class="thumb"><span><img src="map.jpg" alt=""></span></a>
  <h2><a href="#">Sunflowa Media</a></h2>
 </li>
</ul>
</body>
</html>

相關文章