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 相关文章推荐
你必须知道的Javascript知识点之"字面量和对应类型"说明介绍
Apr 23 Javascript
纯js简单日历实现代码
Oct 05 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
简单的网页广告特效实例
Aug 19 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 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
在JavaScript中调用php程序
2009/03/09 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
Python求算数平方根和约数的方法汇总
2016/03/09 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
学python爬虫能做什么
2020/07/29 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
教师自我鉴定
2013/12/13 职场文书
《问银河》教学反思
2014/02/19 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
广告设计应届生求职信
2014/03/01 职场文书
KTV员工管理制度
2015/08/06 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
python随机打印成绩排名表
2021/06/23 Python
Python读写yaml文件
2022/03/20 Python
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技