您的位置:首页 > 教程笔记 > 前端笔记

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

2023-12-04 13:32:38 前端笔记 82

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

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/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>

相关推荐