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