jquery实现的具有渐变效果的图片切换

我心飞翔 分类:实例代码

本章节分享一段代码实例,实现了图片的切换效果,这里不管是背景图片还是其他什么样的切换效果。总之具有渐变效果的切换更为柔和,当然用户使用起来也更加人性化,下面就是一段具有此特性的代码。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>
网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容