手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery实现菜单式图片滑动切换
jQuery实现菜单式图片滑动切换
摘要:jQuery菜单式图片滑动切换是一款天猫官方网站的鼠标滑过图片切换导航菜单特效。复制代码代码如下:$(function(){//floorC...

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实现菜单式图片滑动切换1

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

【jQuery实现菜单式图片滑动切换】相关文章:

jQuery实现给页面换肤的方法

jQuery实现转动随机数抽奖效果的方法

JQuery实现动态添加删除评论的方法

javascript实现简单的省市区三级联动

javascript实现树形菜单的方法

jQuery插件expander实现图片翻转特效

jQuery实现div随意拖动的实例代码(通用代码)

jQuery实现仿腾讯微博滑出效果报告每日天气的方法

jQuery插件jRumble实现网页元素抖动

jQuery实现的多屏图像图层切换效果实例

精品推荐
分类导航