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

前端技术 2023/09/08 JavaScript

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

演示图：

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

本文地址：https://www.stayed.cn/item/21603

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案