oopslwb的gravatar头像
oopslwb 2015-01-09 10:32:04

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

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开始-->......<!--效果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>

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


打赏

文件名:hoverFlip.zip,文件大小:81.418K 下载
  • /
      • /hoverFlip
        • /hoverFlip/51RGB海量优秀学习资源.txt
          • /hoverFlip/css
            • /hoverFlip/css/style.css
          • /hoverFlip/images
            • /hoverFlip/images/1.jpg
            • /hoverFlip/images/2.jpg
            • /hoverFlip/images/3.jpg
            • /hoverFlip/images/4.jpg
            • /hoverFlip/images/5.jpg
最代码最近下载分享源代码列表最近下载
东京不太热  LV7 2021年8月30日
wzwwxn  LV1 2020年2月23日
luohaipeng  LV23 2019年12月5日
低调人  LV38 2019年8月2日
shiciawen110  LV1 2019年3月13日
yyyLLLLLLLLLLL  LV3 2018年12月22日
loverzhao  LV14 2018年10月29日
EQ666666  LV12 2018年9月1日
zhangben_0710  LV12 2018年7月4日
最代码最近浏览分享源代码列表最近浏览
jdndbh  LV6 2021年12月10日
东京不太热  LV7 2021年8月30日
huaua7676  LV30 2021年8月4日
疯子44444 2021年7月11日
暂无贡献等级
muimuimui  LV9 2021年2月13日
hdongh  LV2 2020年9月22日
无量天尊i  LV2 2020年8月21日
hhqtjl  LV1 2020年6月20日
luohaipeng  LV23 2019年12月4日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友