欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-11 20:44:59
...
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);
})
})

演示图:

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

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