<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航定位特效</title> <style> *{ margin:0; padding:0; } body{ line-height: 1.7; font-size:12px; } li{ list-style-type:none; } #content{ width: 800px; margin:0 auto; padding:20px; } #content h1{ color: #0088bb; } .item{ padding:20px; margin-bottom:20px; border:1px solid #0088bb; } .item h2{ font-size:16px; border-bottom:1px solid #0088bb; padding-bottom:10px; } .item li{ display: inline; margin-right:10px; } .item li a img{ width:230px; height:230px; border:0; } #menu{ position: fixed; top:100px; left:50%; margin-left:400px; } #menu li a{ display: block; text-decoration: none; font-size:14px; width:80px; height:50px; line-height:50px; color: #333; margin:5px 0; text-align: center; } #menu li a:hover,.current{ background: #0088bb; color:white; } </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ var menu=$("#menu"); var top =$(document).scrollTop(); var items=$("#content").find(".item"); var currentId=""; items.each(function(){ var m =$(this); if(top> m.offset().top){ currentId="#"+ m.attr("id") }else{ return false } }); var currentLink=menu.find(".current") if(currentId && currentLink!=currentId){ menu.find(".current").removeClass("current") menu.find("[href=" + currentId + "]").addClass("current"); } }) }) </script> </head> <body> <div id="menu"> <ul> <li><a href="#item1" class="current">1F 男装</a></li> <li><a href="#item2">2F 女装</a></li> <li><a href="#item3">3F 美妆</a></li> <li><a href="#item4">4F 数码</a></li> <li><a href="#item5">5F 童装</a></li> </ul> </div> <div id="content"> <h1>淘宝网</h1> <div id="item1" class="item"> <h2>1F 男装</h2> <ul> <li><a href="#"><img src="1F.jpg"></a></li> <li><a href="#"><img src="1F.jpg"></a></li> <li><a href="#"><img src="1F.jpg"></a></li> <li><a href="#"><img src="1F.jpg"></a></li> <li><a href="#"><img src="1F.jpg"></a></li> <li><a href="#"><img src="1F.jpg"></a></li> <li><a href="#"><img src="1F.jpg"></a></li> <li><a href="#"><img src="1F.jpg"></a></li> <li><a href="#"><img src="1F.jpg"></a></li> </ul> </div> <div id="item2" class="item"> <h2>2F 女装</h2> <ul> <li><a href="#"><img src="2F.jpg"></a></li> <li><a href="#"><img src="2F.jpg"></a></li> <li><a href="#"><img src="2F.jpg"></a></li> <li><a href="#"><img src="2F.jpg"></a></li> <li><a href="#"><img src="2F.jpg"></a></li> <li><a href="#"><img src="2F.jpg"></a></li> <li><a href="#"><img src="2F.jpg"></a></li> <li><a href="#"><img src="2F.jpg"></a></li> <li><a href="#"><img src="2F.jpg"></a></li> </ul> </div> <div id="item3" class="item"> <h2>3F 美妆</h2> <ul> <li><a href="#"><img src="3F.jpg"></a></li> <li><a href="#"><img src="3F.jpg"></a></li> <li><a href="#"><img src="3F.jpg"></a></li> <li><a href="#"><img src="3F.jpg"></a></li> <li><a href="#"><img src="3F.jpg"></a></li> <li><a href="#"><img src="3F.jpg"></a></li> <li><a href="#"><img src="3F.jpg"></a></li> <li><a href="#"><img src="3F.jpg"></a></li> <li><a href="#"><img src="3F.jpg"></a></li> </ul> </div> <div id="item4" class="item"> <h2>4F 数码</h2> <ul> <li><a href="#"><img src="4F.png"></a></li> <li><a href="#"><img src="4F.png"></a></li> <li><a href="#"><img src="4F.png"></a></li> <li><a href="#"><img src="4F.png"></a></li> <li><a href="#"><img src="4F.png"></a></li> <li><a href="#"><img src="4F.png"></a></li> <li><a href="#"><img src="4F.png"></a></li> <li><a href="#"><img src="4F.png"></a></li> <li><a href="#"><img src="4F.png"></a></li> </ul> </div> <div id="item5" class="item"> <h2>5F 童装</h2> <ul> <li><a href="#"><img src="5F.jpg"></a></li> <li><a href="#"><img src="5F.jpg"></a></li> <li><a href="#"><img src="5F.jpg"></a></li> <li><a href="#"><img src="5F.jpg"></a></li> <li><a href="#"><img src="5F.jpg"></a></li> <li><a href="#"><img src="5F.jpg"></a></li> <li><a href="#"><img src="5F.jpg"></a></li> <li><a href="#"><img src="5F.jpg"></a></li> <li><a href="#"><img src="5F.jpg"></a></li> </ul> </div> </div> </body> </html>
用jquery制作导航定位特效
最新推荐文章于 2025-05-15 13:35:03 发布