jQuery实现菜单式图片滑动切换
更新时间：2015年03月14日 11:11:51 投稿：hebedich
这篇文章主要介绍了jQuery实现菜单式图片滑动切换效果，主要是依托于jQuery Lightbox插件来实现，非常炫酷，这里推荐给小伙伴们
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实现小球点击发射动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了jQuery实现的超简单轮播图功能,结合完整实例形式分析了基于jQuery实现的轮播图相关功能实现、样式设置与注意事项,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Jquery实现获取子元素的方法,结合实例形式分析了jQuery针对页面元素的查找、获取相关操作技巧,需要的朋友可以参考下2019-08-08
本文的目的是可以快速了解jQuery插件的开发原理以及掌握jQuery开发的基本技能。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了jQuery实现tab选项卡效果的方法,实例分析了jquery实现tab选项卡切换效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
图像滑块和幻灯片效果，已成为网页设计的基本要素。它们以有趣的方式展示视觉内容。如果你一直想知道这是如何实现的，那么这里的25个非常棒的 jQuery 图片滑块制作教程将帮助您实现这种效果2011-09-09
本文主要介绍jQuery ajax请求在IE6中莫名中断问题的解决方法，有需要的朋友可以参考一下。2016-06-06
这篇文章主要介绍了使用Jquery如何获取带特殊符号的ID 标签，该怎么写,需要的朋友可以参考下2014-04-04
用Jquery想动态更改一张位图的src发现css不好用而attr貌似是能操作所有属性，包括Jquery未封装的属性，具体实现如下，感兴趣的朋友可以参考下2013-07-07
jQuery表单验证插件formValidator(改进版)
随着jQuery被越来越多的人使用，基于jQuery的表单验证插件，也从无到现在比较流行的已经有10个左右了2012-02-02
最新评论