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 相关文章推荐
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 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
解析crontab php自动运行的方法
2013/06/24 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
jquery 简单导航实现代码
2009/09/11 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
python调用摄像头拍摄数据集
2019/06/01 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
物业门卫岗位职责
2013/12/28 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
评职称个人总结
2015/03/05 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL