jQuery实现菜单式图片滑动切换
时间:2020-11-27 11:04:37|栏目: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);
})
})
演示图:
以上就是本文的全部内容了,希望大家能够喜欢。
上一篇:jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
栏 目:jquery
下一篇:jquery事件与函数的使用介绍
本文标题:jQuery实现菜单式图片滑动切换
本文地址:http://www.codeinn.net/misctech/26773.html