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 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
jquery 使用简明教程
Mar 05 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
Javascript继承机制详解
May 30 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
javascript递归函数定义和用法示例分析
Jul 22 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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
在PHP中使用灵巧的体系结构
2006/10/09 PHP
用PHP调用数据库的存贮过程!
2006/10/09 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
Grid得到选择行数据的方法总结
2011/01/17 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
小学生防溺水广播稿
2014/01/12 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
寒假生活随笔
2015/08/15 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js