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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
Ajax请求超时与网络异常处理图文详解
May 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
将二维数组转为一维数组的2种方法
2014/05/26 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
js中split函数的使用方法说明
2013/12/26 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python heapq使用详解及实例代码
2017/01/25 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
市场部管理制度
2014/02/02 职场文书
大专会计自我鉴定
2014/02/06 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
本科生求职信
2014/06/17 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
Python代码实现双链表
2022/05/25 Python
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android