页面导航: 站长工具网络编程JavaScriptjavascript类库jquery → 正文内容 jQuery实现菜单式图片滑动切换

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

投稿:hebedich 字体:[增加 减小] 类型:转载
这篇文章主要介绍了jQuery实现菜单式图片滑动切换效果,主要是依托于jQuery Lightbox插件来实现,非常炫酷,这里推荐给小伙伴们

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);
    })
})

演示图:

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