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 相关文章推荐
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
Angular5.1新功能分享
Dec 21 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 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中的时间处理
2006/10/09 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
python提取字典key列表的方法
2015/07/11 Python
python 的列表遍历删除实现代码
2020/04/12 Python
Python 多线程实例详解
2017/03/25 Python
python安装numpy&安装matplotlib& scipy的教程
2017/11/02 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python适合人工智能的理由和优势
2019/06/28 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Python urllib.request对象案例解析
2020/05/11 Python
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
生产副总岗位职责
2013/11/28 职场文书
大学生求职自荐信
2013/12/12 职场文书
《开国大典》教学反思
2014/04/19 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL