PHP:oci_free_descriptor()的用法_Oracle函數(shù)
701
2023-12-12
實現(xiàn)京東商城樓梯式導航定位菜單:滾動定位菜單項和點擊定位菜單項!
涉及知識點:find()、parent()、offset()、scroll()等jQ函數(shù),請自覺復習各種函數(shù)!
html代碼:
< 導航菜單 --> <div id="menu"> <ul> <li>1F<span>服飾</span></li> <li>2F<span>美妝</span></li> <li>3F<span>手機</span></li> <li>4F<span>家電</span></li> <li>5F<span>數(shù)碼</span></li> <li>6F<span>運動</span></li> <li>7F<span>居家</span></li> <li>8F<span>母嬰</span></li> <li>9F<span>食品</span></li> <li>10F<span>圖書</span></li> <li>11F<span>服務</span></li> </ul> </div> < 導航菜單 --> < 產品內容 --> <div id="content"> <img src="http://www.gimoo.net/t/1901/images/head.png" alt="" style="border:1px solid red;"> <div class="louti" id="louti1"><img src="http://www.gimoo.net/t/1901/images/f1.png" alt=""></div> <div class="louti" id="louti2"><img src="http://www.gimoo.net/t/1901/images/f2.png" alt=""></div> <div class="louti" id="louti3"><img src="http://www.gimoo.net/t/1901/images/f3.png" alt=""></div> <div class="louti" id="louti4"><img src="http://www.gimoo.net/t/1901/images/f4.png" alt=""></div> <div class="louti" id="louti5"><img src="http://www.gimoo.net/t/1901/images/f5.png" alt=""></div> <div class="louti" id="louti6"><img src="http://www.gimoo.net/t/1901/images/f6.png" alt=""></div> <div class="louti" id="louti7"><img src="http://www.gimoo.net/t/1901/images/f7.png" alt=""></div> <div class="louti" id="louti8"><img src="http://www.gimoo.net/t/1901/images/f8.png" alt=""></div> <div class="louti" id="louti9"><img src="http://www.gimoo.net/t/1901/images/f9.png" alt=""></div> <div class="louti" id="louti10"><img src="http://www.gimoo.net/t/1901/images/f10.png" alt=""></div> <div class="louti" id="louti11"><img src="http://www.gimoo.net/t/1901/images/f11.png" alt=""></div> </div> < 產品內容 --> < 底部 --> <div id="footer" class="container"></div>
css代碼:
#menu{ width:32px;height:360px; position:fixed; top:200px;left:0px; display: none; } #menu ul li{ width:32px;height:32px; list-style-type:none; color:#8F8583; text-align:center; line-height: 32px; border-bottom:1px dotted #ddd; position:relative; } #menu ul li span{ display:block;width:32px;height:32px; background:#C81623; position:absolute; top:0;left:0; color:#fff;font-size:12px; display: none; } #menu ul li:hover span{display:block; } #menu ul li span.active{color:#C81623;background:#fff;display:block;} #content{ width:1220px; margin:0 auto; } #footer{width:1220px;height:600px;background:#FE7678;} .container{margin:0 auto;}
jQuery代碼:
$(function(){ var _index=0; $("#menu ul li").click(function(){ $(this).find("span").addClass("active").parent().siblings().find("span").removeClass("active"); _index=$(this).index()+1; //通過拼接字符串獲取元素,再取得相對于文檔的高度 var _top=$("#louti"+_index).offset().top; //scrollTop滾動到對應高度 $("body,html").animate({scrollTop:_top},500); }); var nav=$("#menu"); //得到導航對象 var win=$(window); //得到窗口對象 var sc=$(document);//得到document文檔對象。 win.scroll(function(){ if(sc.scrollTop()>=600){ $("#menu").show(); //獲取滾動元素對應的索引!!!重難點 var index=Math.floor(sc.scrollTop()/600); $("#menu ul li span").eq(index-1).addClass("active").parent().siblings().find("span").removeClass("active"); }else{ $("#menu").hide(); } }); });
滾動中常用到的jQ寫法:
$("body,html").animate({scrollTop:_top},500);
總結:相對來說,這是個蠻有趣的實踐案例,但其中用到比較多的函數(shù),結合了本案例比較特殊的html結構設計,需要理清滾動導航時候的條件判斷。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持綠夏網。
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業(yè)或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯(lián)系進行刪除處理。敬請諒解!