仿京東首頁商品分類底部色標隨鼠標移動特效
今天扒皮下京東商品展現區的一個特效：javascript
你們能夠自行去京東看下特效，下面是這個特效的動態圖（此次聰明的我懂得給圖加水印了）css
理下思路，每一個分類選項卡寬度一致，且有一條灰色底邊，而後默認有一條紅色的色標讓它漂浮在首個選項卡上面（其中的小三角形能夠本身作個圖），默認首個選項卡的文本（像上圖是「AAA」）爲紅色，其它選項卡的爲灰色。默認除第一個選項卡對應的下方的內容DIV顯示外，其它選項卡對應的內容DIV隱藏；java
鼠標移到某個選項卡則改變該選項卡字體顏色（兄弟選項卡字體變灰色），再獲取它的index，下方內容區域對應index的DIV顯示出來（兄弟元素隱藏）；ide
同時紅色的色標則搞個animate，動態修改left值，參數爲 「選項卡寬度 * index」 的大小。字體
思路理清了，一切就so easy~this
先寫下HTML代碼：url
<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區域內的部分就好了。spa
其中stair_right_nav_arrow是紅色底標，能夠經過position:absolute和z-index來讓起浮在上方。blog
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搞定妥妥的~或許有更好的解決方案，也歡迎各位交流分享 :)
相關文章
- 1. 仿京東商品分類
- 2. 鼠標移動特效之圖片跟隨鼠標移動
- 3. 仿京東商城左側商品分類導航-JS網頁特效
- 4. 仿京東移動端首頁
- 5. 仿京東商品分類導航
- 6. Android仿京東商品分類
- 7. jQuery特效 | 導航底部橫線跟隨鼠標緩動
- 8. 仿京東首頁
- 9. 移動端京東首頁
- 10. 一些簡單的特效 鼠標懸停 鼠標移動 和 圖標特效
- 更多相關文章...
- • Web 品質- 標準 - 網站品質教程
- • ionic 頭部與底部 - ionic 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 仿京東商品分類
- 2. 鼠標移動特效之圖片跟隨鼠標移動
- 3. 仿京東商城左側商品分類導航-JS網頁特效
- 4. 仿京東移動端首頁
- 5. 仿京東商品分類導航
- 6. Android仿京東商品分類
- 7. jQuery特效 | 導航底部橫線跟隨鼠標緩動
- 8. 仿京東首頁
- 9. 移動端京東首頁
- 10. 一些簡單的特效 鼠標懸停 鼠標移動 和 圖標特效