仿京东首页商品分类底部色标随鼠标移动特效

分类：jQuery作者：编程之家用户

今天扒皮下京东商品展示区的一个特效：

 

大家可以自行去京东看下特效，下面是这个特效的动态图（这次聪明的我懂得给图加水印了

）

 

 

理下思路，每个分类选项卡宽度一致，且有一条灰色底边，然后默认有一条红色的色标让它漂浮在首个选项卡上面（其中的小三角形可以自己做个图），默认首个选项卡的文本（像上图是“AAA”）为红色，其它选项卡的为灰色。默认除第一个选项卡对应的下方的内容DIV显示外，其它选项卡对应的内容DIV隐藏；

鼠标移到某个选项卡则改变该选项卡字体颜色（兄弟选项卡字体变灰色），再获取它的index，下方内容区域对应index的DIV显示出来（兄弟元素隐藏）；

同时红色的色标则搞个animate，动态修改left值，参数为 “选项卡宽度 * index” 的大小。

思路理清了，一切就so easy~

 

 

 

先写下HTML代码：

<div class="body_stairs">     

    <div class="stair_left">
        <div class="stair_left_title">
            <span>零食美食</span> 
        </div>
        <div class="stair_left_ad">
        </div>
    </div><!--stair_left结束-->


    <div class="stair_right">
        <div class="stair_right_navout">
            <div><div class="stair_right_nav_arrow"></div></div> <!--外部再加div是为兼容IE6-->
            <div class="stair_right_nav">特价商品</div>
            <div class="stair_right_nav">蜜饯果脯</div>
            <div class="stair_right_nav">饼干蛋糕</div>
            <div class="stair_right_nav">巧克力</div>
            <div class="stair_right_nav">糖果布丁</div>
            <div class="stair_right_nav">冰淇淋</div>
            <div class="stair_right_nav">饭类面食</div>
        </div>  
        <div class="stair_right_content">1的展示内容
        </div>
        <div class="stair_right_content">2
        </div>
        <div class="stair_right_content">3
        </div>
        <div class="stair_right_content">4
        </div>
        <div class="stair_right_content">5
        </div>
        <div class="stair_right_content">6
        </div>
        <div class="stair_right_content">7
        </div>
    </div><!--stair_right结束-->

</div><!--body_stairs结束-->

 主要看class="stair_right"的div区域内的部分就行了。

其中stair_right_nav_arrow是红色底标，可以通过position:absolute和z-index来让起浮在上方。

stair_right_nav是选项卡，可以看到，我这里写了7个选项卡，顺便说下这里每个选项卡宽度都为143px。

stair_right_content是7个选项卡对应的内容展示div。

写下stair_right部分的css吧：

.stair_right{
	width:1001px;
	height:560px;
	float:right;
}
.stair_right_navout{
	width:1001px;
	height:45px;
	position:relative;
	z-index:1;
}
.stair_right_nav{
	position:relative;
	z-index:1;
	width:143px;
	height:30px;
	padding-top:12px;
	float:left;
	text-align:center;
	font-size:16px;
	font-family:黑体;
	border-bottom:solid 3px #DDD;
	background-color:#F9F9F9;
}
.stair_right_nav_arrow{
	position:absolute;
	left:0px;
	z-index:2;
	width:143px;
	height:10px;
	margin-top:32px;_margin-top:23px;
	background:url(../../img/body/stairs/arrow.jpg) bottom center no-repeat;     /*这个是红色色标上方小三角形图标*/
	border-bottom:solid 3px #ED1E24;
}
.stair_right_content{
	width:1001px;
	height:515px;
	display:none;
	overflow:hidden;
}

 最终是这样的既视感（第一个选项卡文本红色及其对应的下方的内容展示div会显示，是在后面的js写出来的）：

 

接着就按我们前面理出来的思路来写JQ文件：

$(function(){


	 $(".stair_right_nav:first").css({"color":"red"});       //默认首个选项卡文字设为红色
	 $(".stair_right_content:first").show();              //默认首个内容展示DIV显示出来
	 $(".stair_right_nav").each(function(index){         //遍历全部选项卡，并绑定mouseover事件    
		 $(this).mouseover(function(){
			 $(this).css({"color":"red"}).siblings().css({"color":"black"});   //鼠标经过的当前选项卡文本设为红色，兄弟元素文本设为黑色
			 $(".stair_right_content").hide().eq(index).show();     //让对应的内容展示div显示出来，且兄弟元素隐藏
			 var slide_width=index*143;           //这个是红色色标要移动的距离
			 $(".stair_right_nav_arrow").stop().animate({left:slide_width+"px"},500);    //让红色色标在半秒内移动到对应选项卡

			 })
		 })

})

 

然后搞定。然后。。。。这样就轻松结束了么？ NO，这不是我今天想重点写的东西。

一般来说一个电商都不仅仅只有一个这样的楼层，像京东首页有着八层这样的楼层。而我们现在写的代码，仅能供一个楼层使用，也就说现在的JS代码复用率不高。

我是这样解决复用率的问题：

给每个楼层的选项卡、色标、内容区域的class后面加个数字，然后JS里再写个楼层循环来给这些楼层绑定事件。

HTML（这里只写了前两个楼层，实际有十个楼层）：

<div class="body_stairs">     

    <div class="stair_left">
        <div class="stair_left_title">
            <span>零食美食</span> 
        </div>
        <div class="stair_left_ad">
        </div>
    </div><!--stair_left结束-->


    <div class="stair_right">
        <div class="stair_right_navout">
            <div><div class="stair_right_nav_arrow0"></div></div> 

<!--外部再加div是为兼容IE6-->
            <div class="stair_right_nav0">特价商品</div>
            <div class="stair_right_nav0">蜜饯果脯</div>
            <div class="stair_right_nav0">饼干蛋糕</div>
            <div class="stair_right_nav0">巧克力</div>
            <div class="stair_right_nav0">糖果布丁</div>
            <div class="stair_right_nav0">冰淇淋</div>
            <div class="stair_right_nav0">饭类面食</div>
        </div>  
        <div class="stair_right_content0">楼层1的第一个展示区内容
        </div>
        <div class="stair_right_content0">2
        </div>
        <div class="stair_right_content0">3
        </div>
        <div class="stair_right_content0">4
        </div>
        <div class="stair_right_content0">5
        </div>
        <div class="stair_right_content0">6
        </div>
        <div class="stair_right_content0">7
        </div>
    </div><!--stair_right结束-->

</div><!--body_stairs结束-->    


<div class="body_stairs">     

    <div class="stair_left">
        <div class="stair_left_title">
            <span>家居生活</span> 
        </div>
        <div class="stair_left_ad">
        </div>
    </div><!--stair_left结束-->


    <div class="stair_right">
        <div class="stair_right_navout">
            <div><div class="stair_right_nav_arrow1"></div></div> 

<!--外部再加div是为兼容IE6-->
            <div class="stair_right_nav1">特价商品</div>
            <div class="stair_right_nav1">衣橱衣柜</div>
            <div class="stair_right_nav1">沙发座椅</div>
            <div class="stair_right_nav1">五金家具</div>
            <div class="stair_right_nav1">窗具</div>
            <div class="stair_right_nav1">床上用品</div>
            <div class="stair_right_nav1">饰品挂件</div>
        </div>  
        <div class="stair_right_content1">楼层2的第一个展示区内容
        </div>
        <div class="stair_right_content1">2
        </div>
        <div class="stair_right_content1">3
        </div>
        <div class="stair_right_content1">4
        </div>
        <div class="stair_right_content1">5
        </div>
        <div class="stair_right_content1">6
        </div>
        <div class="stair_right_content1">7
        </div>
    </div><!--stair_right结束-->

</div><!--body_stairs结束-->

 

CSS：

.stair_right{
	width:1001px;
	height:560px;
	float:right;
}
.stair_right_navout{
	width:1001px;
	height:45px;
	position:relative;
	z-index:1;
}
.stair_right_nav0,.stair_right_nav1,.stair_right_nav2,.stair_right_nav3,.stair_right_nav4,.stair_right_nav5,.stair_right_nav6,.stair_right_nav7,.stair_right_nav8,.stair_right_nav9,.stair_right_nav10{
	position:relative;
	z-index:1;
	width:143px;
	height:30px;
	padding-top:12px;
	float:left;
	text-align:center;
	font-size:16px;
	font-family:黑体;
	border-bottom:solid 3px #DDD;
	background-color:#F9F9F9;
}
.stair_right_nav_arrow0,.stair_right_nav_arrow1,.stair_right_nav_arrow2,.stair_right_nav_arrow3,.stair_right_nav_arrow4,.stair_right_nav_arrow5,.stair_right_nav_arrow6,.stair_right_nav_arrow7,.stair_right_nav_arrow8,.stair_right_nav_arrow9,.stair_right_nav_arrow10{
	position:absolute;
	left:0px;
	z-index:2;
	width:143px;
	height:10px;
	margin-top:32px;_margin-top:23px;
	background:url(../../img/body/stairs/arrow.jpg) bottom center no-repeat;
	border-bottom:solid 3px #ED1E24;
}
.stair_right_content0,.stair_right_content1,.stair_right_content2,.stair_right_content3,.stair_right_content4,.stair_right_content5,.stair_right_content6,.stair_right_content7,.stair_right_content8,.stair_right_content9,.stair_right_content10{
	width:1001px;
	height:515px;
	display:none;
	overflow:hidden;
}

 JQ：

$(function(){

	 for(var i=0;i<=10;i++){     //遍历十个楼层
	 $(".stair_right_nav"+i+":first").css({"color":"red"});   //默认每个楼层的首个选项卡文字设为红色
	 $(".stair_right_content"+i+":first").show();          //默认每个楼层的首个内容展示DIV显示出来
	 $(".stair_right_nav"+i).each(function(index){       //遍历每个楼层的全部选项卡，并绑定mouseover事件
		 $(this).mouseover(function(){
			 var nav_classname=$(this).attr("class").toString();     //获取鼠标经过的选项卡的class名
			 var nav_l=nav_classname.length;                  //获取class名长度
			 var j=nav_classname.substring(15,nav_l);       //通过截取class名的数字部位来获得当前选项卡的索引值（注意这里index已经变为楼层的索引了，不再适用）
			 $(this).css({"color":"red"}).siblings().css({"color":"black"});  //鼠标经过的当前选项卡文本设为红色，兄弟元素文本设为黑色
			 $(".stair_right_content"+j).hide().eq(index).show();   //鼠标经过的当前选项卡对应的内容展示区域显示，该楼层兄弟元素隐藏
			 var slide_width=index*143;     //这个是红色色标要移动的距离
			 $(".stair_right_nav_arrow"+j).stop().animate({left:slide_width+"px"},500);    //让红色色标在半秒内移动到对应选项卡

			 })
		 })

	 }
})

 

OK搞定妥妥的~或许有更好的解决方案，也欢迎各位交流分享 :)

 

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

jq配合后端解决跨域
1.第一步 设置响应头 header(&#39;Access-Control-Allow-Origin:*&#39;); //支持全域名访问，不安全，部署后需要固定限制为客户端网址 header(&#39;Access-Control-Allow-Methods:POST,GET,OPTIONS,D
$.inArray()方法介绍
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回-1; $.inArray(value,array) --value是要查找的值，array是被查找的数组。 有如下实例： &lt;!DOCTYPE html&gt; &l
jquery.serializejson.min.js的妙用
jquery.serializejson.min.js的妙用 关于这个jquery.serializejson.min.js插件来看，他是转json的一个非常简单好用的插件。 前端在处理含有大量数据提交的表单时，除了使用Form直接提交刷新页面之外，经常碰到的需求是收集表单信息成数据对象，Ajax提
JS 将form表单数据快速转化为object对象（json对象）
JS 将form表单数据快速转化为object对象（json对象） jaymou 于 2020-03-03 11:11:05 发布 3534 收藏 3 分类专栏： 前端 文章标签： javascript jquery 版权 前端 专栏收录该内容 5 篇文章0 订阅 订阅专栏 直接上代码 /** *
jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同
jQuery的区别：$().click()和$(document).on(&#39;click&#39;,&#39;要选择的元素&#39;,function(){})的不同 文章地址：https://www.cnblogs.com/sqh17/p/7746418.html 解决：动态创建的元素的事件
jQuery插件之jquery.spinner数字智能增减插件
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http://www.helloweba.com/view-blog-282.html 左右加减数字 像京东提交订单时目前使用的是左右加减数字的效果，这个效果直接明了，操作简单。我们使用jquery.spinner.js插件实
获取和渲染下拉列表选项
layui标签或一般标签均可&lt;div class=&quot;layui-form-item&quot;&gt; &lt;label class=&quot;layui-form-label&quot;&gt;异地仓名称&lt;/label&gt; &lt;div class=&quot;la
JQuery 动态添加 select option选项
网上对于select option 动态添加修改如下， $(&quot;#selectId&quot;).append(&quot;&lt;option value=&#39;&quot;+value+&quot;&#39;&gt;&quot;+text+&quot;&lt;/option&gt;&
jQuery中的 $.extend() 和 $.fn.extend()
jQuery中的 $.extend() 和 $.fn.extend() ANGWH 于 2020-05-24 06:39:59 发布 注意：$.extend是为jQuery类添加添加类方法,用$.调用（类似$.ajax），$.fn.extend则是为jQuery对象添加方法（实例方法）,用DOM元素
jQ动态回显ajax请求的值
jquery 循环数组输出显示在html页面 jquery 没有双向数据绑定，但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上，这时我们可以用字符串拼接，元素添加的方法去实现 js部分如下： 复制代码 $(function(){ var a=[&quot;1aa&quot;,&q
javascript事件委托理解，jQuery .on()方法一步到位实现事件委托
javascript事件委托理解，jQuery .on()方法一步到位实现事件委托 Javascript-概念原理 专栏收录该内容 10 篇文章0 订阅 订阅专栏 本篇文章借鉴自：博客园文章，只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托？他还有一个名字叫做事件代理，（时间代理 事件委托，
JQuery-$.when().done().fail()的使用
JQuery-$.when().done().fail()的使用 原文引用于&#160;Echoo华地于&#160;2022-01-06 14:07:10 发布 jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。 每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1
jQuery tableExport导出 excel
jQuery tableExport导出 excel 上篇写的是jQuery&#160;导出word，就试试导出excel。看见网上写的很乱，我这就把我写的整理下来，有部分来自网上capy 1. js文件的引用 &lt;script type=&quot;text/javascript&quot;
jQuery的遍历-prev()和next()方法（购物车数量加减）
jQuery的遍历-prev()和next()方法 &lt;div class=&quot;box&quot; id=&quot;box&quot;&gt; &lt;a href=&#39;#&#39; class=&quot;a&quot;&gt; &lt;input type=&quot;tex
attr()和addClass()的区别
attr()和addClass()的区别 方法 addClass() attr()用途&#x9;追加样式&#x9;设置样式对同一个网页元素操作&#x9;&lt;p&gt;test&lt;/p&gt;第1次使用方法&#x9;$(&quot;p&quot;).addClass(&quot;high&quot;);&#x9;$(&quot;p&
前端——函数（匿名函数、自执行函数）
前端——函数（匿名函数、自执行函数） FreshLemon_ 于 2019-06-11 17:11:49 发布 函数声明：function box(){} 函数表达式：var box = function(){}; 匿名函数：function(){} （属于函数表达式） 1声明了一个函数： var
js: 获取标签元素data-*属性值的方法
js: 获取标签元素data-*属性值的方法 彭世瑜 于 2022-05-23 09:59:50 发布 2165 收藏 1 文章标签： javascript 前端 jquery 版权 标签上有两个属性data-id 和 data-user-name, 需要通过js去获取 &lt;style&gt;
JavaScript函数详解：匿名函数、具名函数、函数传参、不定参、返回值、JS预解析机制
JavaScript函数详解：匿名函数、具名函数、函数传参、不定参、返回值、JS预解析机制 1.具名函数 定义： 调用： 方式1：方法名(); 可以多次调用 方式2：在事件中调用，直接写函数名，不需用括号 2.匿名函数 没有名字的函数 匿名函数在使用时只有两种情况： 1.匿名函数自执行：声明后不需要
如何等待ajax完成再执行相应操作
如何等待ajax完成再执行相应操作 ajax广泛应用于异步请求，对于大多数业务来说，这是十分方便的，但对于一些特殊的业务，ajax的异步性会起到相反的作用。 例如在ajax请求成功后，后续的操作需要依赖ajax执行成功后的相应操作。 // 声明一个表示状态的全局变量 status var statu
一步一步教你写一个jQuery的插件教程(Plugin)
一步一步教你写一个jQuery的插件教程(Plugin) 更新时间：2009年09月03日 02:10:54 作者： 我将会在下面的例子中一个一个的说明上面这几个条件,做完这些事情后我们就会创建一个高亮显示text的简单插件。 jQuery 的plugin开发需要注意的事情, 1. 明确jQuery
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot