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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
js编写简易的计算器
Jul 29 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
PHP新手上路(二)
2006/10/09 PHP
使用PHP实现密保卡功能实现代码<打包下载直接运行>
2011/10/09 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
node的process以及child_process模块学习笔记
2018/03/06 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
从零学Python之hello world
2014/05/21 Python
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
python cookie反爬处理的实现
2020/11/01 Python
Python实现自动整理文件的脚本
2020/12/17 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
PHP如何对用户密码进行加密
2014/07/31 面试题
新员工入职感言
2014/02/01 职场文书
营销总经理岗位职责
2014/02/02 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
预备党员自我评价范文
2015/03/04 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
python调试工具Birdseye的使用教程
2021/05/25 Python
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫