jQuery移动鼠标悬停图片时，翻转显示文字说明网页特效源代码下载

特效说明：一款jQuery鼠标悬停图片翻转显示文字说明网页特效，鼠标滑过当前图片，图片动画翻转显示对应文字说明图文列表特效，该特效模仿乐蜂网品牌部分切换的效果，默认显示logo图片，当鼠标悬停的时候，显示文字说明切换过程带有一个立体式效果，用起来很舒服，鼠标移走后，再次恢复显示图片，更多免费JS代码请访问科e互联网页特效频道。（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）

使用方法：1、调用CSS样式：
<link rel="stylesheet" type="text/css" href="css/style.css" />

2、调用JS插件代码：
<script src="js/jquery.js"></script>

3、添加HTML代码：
将......之间的html和js代码；放在<body></body>之间。

4、JS代码：
<script>
$(function(){
      var aLi = $('#brand .bd-box li');
      var aSpan = aLi.find('span');
      var aImg = aLi.find('img');
      aLi.each(function(index){
         $(this).mouseover(function(){
            aImg.eq(index).stop();
            aSpan.eq(index).stop();
            aImg.eq(index).animate({
                  height:0,
                  top:38
            },80,'',function(){
                  $(this).hide();
                  aSpan.eq(index).show().animate({
                     height:75,
                     top:0
                  },80)
            })
         })
         $(this).mouseout(function(){
            aImg.eq(index).stop();
            aSpan.eq(index).stop();
            aSpan.eq(index).animate({
                  height:0,
                  top:38
            },80,'',function(){
                  $(this).hide();
                  aImg.eq(index).show().animate({
                     height:75,
                     top:0
                  },80)
            })
         })
      })
})
</script>

演示地址原帖代码下载地址

猜你喜欢

打赏

0个评论

0个牛币 jQuery 鼠标悬停特效文字特效显示详情特效 JavaScript

文件名:hoverFlip.zip,文件大小:81.418K 下载