jquery仿京東側(cè)邊欄導(dǎo)航效果
本文實例為大家分享了jquery仿京東側(cè)邊欄導(dǎo)航的具體代碼,供大家參考,具體內(nèi)容如下
樣式代碼
<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代碼
這里把圖片的名稱換成數(shù)字的,每一個圖標(biāo)都有兩個圖片, 一個白色和一個綠色的,當(dāng)鼠標(biāo)移動到其中一個圖標(biāo)處時,改變其圖片使其變色,因為一共有八個圖標(biāo),所以總共有16張圖片。因此圖片名改變?yōu)楫?dāng)前圖片名稱數(shù)字+8。
這里用的動態(tài)是slideDown與slideUp。需要注意的是要設(shè)置索引來尋找但前對象的位置(因為是在for循環(huán)里有了索引才能找到當(dāng)前對象的圖片的數(shù)字名稱)。
<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>我的優(yōu)惠券</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" style="width: 160px;height: 170px;"> <br />微信掃碼享優(yōu)惠 </center> </div> </div> <div class="sign sign_top sign_end"> <center> <img src="img/8.png" /> </center> <div class="run_sign"> <center> <span><b>加關(guān)注</b></span> </center> </div> </div> </div> </body>
效果圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 博客側(cè)邊欄模塊跟隨滾動條滑動固定效果的實現(xiàn)方法(js+jquery等)
- jQuery固定浮動側(cè)邊欄實現(xiàn)思路及代碼
- Jquery實現(xiàn)側(cè)邊欄跟隨滾動條固定(兼容IE6)
- jQuery側(cè)邊欄隨窗口滾動實現(xiàn)方法
- jquery實現(xiàn)側(cè)邊欄左右伸縮效果的示例
- jQuery實現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法
- jQuery側(cè)邊欄實現(xiàn)代碼
- 基于jQuery傾斜打開側(cè)邊欄菜單特效代碼
- Jquery實現(xiàn)顯示和隱藏的4種簡單方式
- JQuery顯示、隱藏div的幾種方法簡明總結(jié)
- jQuery實現(xiàn)側(cè)邊欄隱藏與顯示的方法詳解
相關(guān)文章
jQuery實現(xiàn)鼠標(biāo)劃過展示大圖的方法
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)劃過展示大圖的方法,實例分析了jQuery操作鼠標(biāo)事件及圖片處理的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03jQuery oLoader實現(xiàn)的加載圖片和頁面效果
我們使用jQuery的ajax在頁面中就像使用iframe一樣加載其他頁面內(nèi)容,今天我給大家分享一個名叫jQuery oLoader的插件,該插件還集成了oPageLoader,可以輕松實現(xiàn)加載圖片和頁面的漂亮效果。2015-03-03MVC+jQuery.Ajax異步實現(xiàn)增刪改查和分頁
這篇文章主要為大家詳細介紹了MVC結(jié)合jQuery.Ajax異步實現(xiàn)增刪改查和分頁的相關(guān)資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05jQuery實現(xiàn)鼠標(biāo)拖動div改變位置、大小的實踐
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)拖動div改變位置、大小的實踐,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04