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

146 阅读 0 评论 97 点赞

我是靠谱客的博主冷酷羽毛，最近开发中收集的这篇文章主要介绍jQuery实现菜单式图片滑动切换，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

    })

})

演示图：