溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下jquery如何模擬京東實現側邊欄導航效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
樣式代碼
<style>
*{
padding: 0;
margin: 0;
border: 0;
}
body{
height: 2000px;
}
.right_ng{
width: 40px;
height: 100%;
position: absolute;
position: fixed;
right: 0px;
background: #666666;
}
.sign{
width: 40px;
height: 40px;
margin-top:280%;
}
.sign_top{
margin-top: 10px;
}
.sign_add_height{
height: 140px;
background: #888888;
color: #ffffff;
font-size: 13px;
list-style: none;
font-weight: bold;
}
.sign_add_height ul{
margin-top: 6px;
cursor: pointer;
}
.sign_add_height ul li{
list-style-type: none;
width: 20px;
height: 20px;
margin-top: 5px;
}
.buy{
width: 20px;
height: 20px;
border-radius: 10px 10px;
background:#666;
}
.sign_QR{
margin-top: 200%;
position: absolute;
bottom: 50px;
position: fixed;
background: #666666;
}
.sign_end{
position: absolute;
bottom: 0px;
position: fixed;
background: #666666;
}
.sign img{
width: 22px;
height: 22px;
margin-top: 10px;
cursor: pointer;
}
.run_sign{
width: 100px;
height: 40px;
margin-left: -100px;
margin-top: -35px;
background: #666666;
color: #1afa29;
font-size: 13px;
line-height: 40px;
cursor: pointer;
}
.run_QR{
height: 250px;
width: 200px;
margin-left: -200px;
margin-top: -245px;
}
.sign_float{
position: fixed;
}
</style>jQuery代碼
這里把圖片的名稱換成數字的，每一個圖標都有兩個圖片， 一個白色和一個綠色的，當鼠標移動到其中一個圖標處時，改變其圖片使其變色，因為一共有八個圖標，所以總共有16張圖片。因此圖片名改變為當前圖片名稱數字+8。
這里用的動態是slideDown與slideUp。需要注意的是要設置索引來尋找但前對象的位置（因為是在for循環里有了索引才能找到當前對象的圖片的數字名稱）。
<script>
$(function(){
$('.run_sign').css('display','none');
$(".run_QR img").attr("src","img/17.png");
for(var i=0;i<8;i++){
if(i==6){
$('.sign').eq(i).hover(function(){ $(this).css('background','#ea68a2').find('.img_1').attr("src","img/15.png");
$(this).find('.run_sign').css('visibility','visible').stop().slideDown(200);},function(){
$(this).css('background','#666666').find('.img_1').attr("src","img/7.png");
$(this).find('.run_sign').css('visibility','visible').stop().slideUp(200);})}
else if(i==5){
$('.sign').eq(i).hover(function(){ $(this).css('background','#ea68a2').find('img').attr("src","img/14.png");},function(){
$(this).css('background','#888888').find('img').attr("src","img/6.png");})}
else{ $('.sign').eq(i).hover(function(){
var b=$(this).index();
$(this).css('background','#ea68a2').find('img').attr("src","img/"+(b+9)+".png");
$(this).find('.run_sign').css('visibility','visible').stop().slideDown(200);},function(){
var b=$(this).index();
$(this).css('background','#666666').find('img').attr("src","img/"+(b+1)+".png");
$(this).find('.run_sign').css('visibility','visible').stop().slideUp(200);})}}
});
</script>布局代碼
<body> <div class="right_ng"> <div class="sign"> <center> <img src="img/1.png" /> </center> <div class="run_sign"> <center> <span><b>我的訂單</b></span> </center> </div> </div> <div class="sign sign_top"> <center> <img src="img/2.png" /> </center> <div class="run_sign"> <center> <span><b>我的收藏</b></span> </center> </div> </div> <div class="sign sign_top"> <center> <img src="img/3.png" /> </center> <div class="run_sign"> <center> <span><b>我的優惠券</b></span> </center> </div> </div> <div class="sign sign_top"> <center> <img src="img/4.png" /> </center> <div class="run_sign"> <center> <span><b>我的足跡</b></span> </center> </div> </div> <div class="sign sign_top"> <center> <img src="img/5.png" /> </center> <div class="run_sign"> <center> <span><b>我的JImu</b></span> </center> </div> </div> <div class="sign sign_top sign_add_height"> <center> <img src="img/6.png" /> <ul> <li>購</li> <li>物</li> <li>車</li> <li class="buy">0</li> </ul> </center> </div> <div class="sign sign_top sign_QR"> <center> <img class="img_1" src="img/7.png" /> </center> <div class="run_sign run_QR"> <center> <img class="img_2" src="img/17.png" > <br />微信掃碼享優惠 </center> </div> </div> <div class="sign sign_top sign_end"> <center> <img src="img/8.png" /> </center> <div class="run_sign"> <center> <span><b>加關注</b></span> </center> </div> </div> </div> </body>
效果圖：
以上是“jquery如何模擬京東實現側邊欄導航效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
