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 相关文章推荐
JS通过相同的name进行表格求和代码
Aug 18 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
详解Vite的新体验
Feb 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
vue 子组件修改data或调用操作
2020/08/07 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
几个Shell Script面试题
2012/08/31 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
大学毕业生通用自我评价
2014/01/05 职场文书
优秀医生事迹材料
2014/02/12 职场文书
晚归检讨书
2014/02/19 职场文书
搞笑创意广告语
2014/03/17 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
写给老婆的保证书
2015/02/27 职场文书
学生通报表扬范文
2015/05/04 职场文书
承兑汇票延期证明
2015/06/23 职场文书
拿破仑传读书笔记
2015/07/01 职场文书