首页 > web前端 > js教程 > 正文

jQuery实现菜单式图片滑动切换_jquery

WBOY
发布: 2016-05-16 16:09:29
原创
1170 人浏览过

jQuery菜单式图片滑动切换是一款天猫官方网站的鼠标滑过图片切换导航菜单特效。

复制代码 代码如下:

$(function(){
    // floorCon-slide
    $(".floorCon-slide .floorConSlideImgNav li span").css({opacity:0.95})
    $(".floorCon-slide .floorConSlideImgNav li.hover").find("span").css({left:0})//鍒濆
    $(".floorCon-slide .floorConSlideImgNav li").mouseover(function(){
        if($(this).hasClass("hover")){return}//涓嶅鐞嗘弧瓒崇姸鎬佺殑
          var imgleft=$(this).index()*200*(-1)+"px";
          $(this).addClass("hover").find("span").stop().animate({left:0},400)
          $(this).siblings().removeClass("hover").find("span").stop().animate({left:"-20px"},600)
          //鍥剧墖鏄剧ず
          $(this).parent().prev(".floorConSlideImg").stop().animate({left:imgleft},400);
    })
})

演示图:

以上就是本文的全部内容了,希望大家能够喜欢。

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!