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 相关文章推荐
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
详解a++和++a的区别
Aug 30 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
JavaScript实现手风琴效果
Feb 18 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 Javascript
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随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
JS面向对象编程详解
2016/03/06 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
将python安装信息加入注册表的示例
2019/11/20 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
opencv 阈值分割的具体使用
2020/07/08 Python
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
运动会闭幕式解说词
2014/02/21 职场文书
大学生村官演讲稿
2014/04/25 职场文书
房产公证书
2015/01/23 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
上课迟到检讨书
2015/05/06 职场文书
小学运动会前导词
2015/07/20 职场文书
关于车尾的标语大全
2015/08/11 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang