jQuery鼠标悬停图片翻转显示文字说明效果

时间：2014-12-02 来源：互联网

特效说明：

一款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>

标签 jQuery特效鼠标悬停图文特效

预览收藏分享评论