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


Posted in Javascript onMarch 14, 2015

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

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

Javascript 相关文章推荐
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 #Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 #Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 #Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 #Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 #Javascript
javascript实现数独解法
Mar 14 #Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 #Javascript
You might like
PHP开发文件系统实例讲解
2006/10/09 PHP
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
坏狼的PHP学习教程之第2天
2008/06/15 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
浅谈python中的变量默认是什么类型
2016/09/11 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python3爬虫全国地址信息
2019/01/05 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
简单了解python中对象的取反运算符
2019/07/01 Python
wxPython实现绘图小例子
2019/11/19 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
python编程的核心知识点总结
2021/02/08 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
数据库的约束含义
2012/09/09 面试题
网管求职信
2014/03/03 职场文书
合作意向书格式及范文
2014/03/31 职场文书
保安2014年终工作总结
2014/12/06 职场文书
房地产项目合作意向书
2015/05/08 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
2019年入党思想汇报
2019/03/25 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书