-
哪里不對啊?沒有反應?。? $(document).ready(function(){ $(window).scroll(function(){ var top = $(document).scrollTop(); var menu = $("#menu"); var items = $("#content").find(".item"); var currentId = ""; items.each(function(){ var t = $(this); if(top > t.offset().top-300){ currentId = "#" + t.attr("id"); }else{ return false; } }); var currentLink = menu.find(".current"); if(currentId && currentId.attr("href")!=currentId){ currentLink.removeClass(".current"); menu.find('[href='+currentId+']').addClass("current"); } }); });查看全部
-
jQuery的offset()方法會返回一個對象,包含top和left屬性。查看全部
-
全部:查看全部
-
jquery 頁面:itemtop-200像素: <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>查看全部
-
描點鏈接用id 與 href ,name在html5已經取消了查看全部
-
current 的class 為焦點時: #menu ul li a:hover, #menu ul li a .current{ color:#fff; background-color:#0088bb; }查看全部
-
css2 :查看全部
-
css1: *{padding:0; margin:0;} body{ font-size:12px; line-height:1.7; } li{list-style:none;} #content{ width:800px; margin:0 auto; padding:20px; } #content h1{ color:#224444; } #content .item{ padding:20px; margin-bottom:20px; border:1px solid #269ABC; } #content .item h2{ font-size:16px; font-weight:bold; border-bottom:2px solid #0088bb; margin-bottom:10px; } #content .item li{ display:inline; margin-right:10px; } #content .item li a img{ width:230px; height:230px; border:none; } #menu{ position:fixed; top:100px; left:50%; margin-left:400px; width:80px; } #menu ul li a{ display:block; margin:5px 0; font-size:14px; font-weight:bold; color:#ccc; width:88px; height:50px; line-height:50px; text-decoration:none; text-align:center; } #menu ul li a:hover, #menu ul li a .current{ color:#fff; background-color:#0088bb; }查看全部
-
html :alt 用鼠標豎向選擇 <div id="menu"> <ul> <li><a href="#" class="current">1F 女裝</a></li> <li><a href="#">2F 男裝</a></li> <li><a href="#">3F 母嬰</a></li> <li><a href="#">4F 數碼</a></li> <li><a href="#">5F 美妝</a></li> </ul> </div> <div id="content"> <h1>地購購物</h1> <div id="item1" class="item"> <h1>1F 女裝</h1> <ul> <li><a href="#"><img src="../img/JM.ico" alt=""/></a></li> <li><a href="#"><img src="../img/JM.ico" alt=""/></a></li> <li><a href="#"><img src="../img/JM.ico" alt=""/></a></li> <li><a href="#"><img src="../img/JM.ico" alt=""/></a></li> <li><a href="#"><img src="../img/JM.ico" alt=""/></a></li> <li><a href="#"><img src="../img/JM.ico" alt=""/></a></li> </ul> </div> <div id="item2" class="item"> <h1>2F 男裝</h1> <ul> <li><a href="#"><img src="../img/1H.ico" alt=""/></a></li> <li><a href="#"><img src="../img/1H.ico" alt=""/></a></li>查看全部
-
特效技術點查看全部
-
特效技術點:查看全部
-
特效設計:查看全部
-
網頁定位導航特效中,導航條和滾動條之間的關系是: 導航條隨著滾動條的滾動改變焦點,其實就是給相應的項目增加樣式,這是這個特效的難點。查看全部
-
分析-設計-實現"這是解決問題的一般流程。查看全部
-
滾動條到上面的距離 與 內容自身的高度距離上面的offsetTop高度查看全部
舉報
0/150
提交
取消