<!doctype html><html><head>? ? <meta charset="UTF-8">? ? <title>地狗購物網(wǎng)-網(wǎng)頁定位導(dǎo)航效果</title>? ? <style>? ? ? ? * {? ? ? ? ? ? margin: 0;? ? ? ? ? ? padding: 0;? ? ? ? }? ? ? ? body {? ? ? ? ? ? font-size: 12px;? ? ? ? ? ? line-height: 1.7;? ? ? ? }? ? ? ? li {? ? ? ? ? ? list-style: none;? ? ? ? }? ? ? ? #content {? ? ? ? ? ? width: 800px;? ? ? ? ? ? margin: 0 auto;? ? ? ? ? ? padding: 20px;? ? ? ? }? ? ? ? #content h1 {? ? ? ? ? ? color: #0088bb;? ? ? ? }? ? ? ? #content .item {? ? ? ? ? ? padding: 20px;? ? ? ? ? ? margin-bottom: 20px;? ? ? ? ? ? border: 1px dotted #0088bb;? ? ? ? }? ? ? ? #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: 50px;? ? ? ? }? ? ? ? #menu ul li a {? ? ? ? ? ? display: block;? ? ? ? ? ? margin: 5px 0;? ? ? ? ? ? font-size: 14px;? ? ? ? ? ? font-weight: bold;? ? ? ? ? ? color: #333;? ? ? ? ? ? width: 80px;? ? ? ? ? ? height: 50px;? ? ? ? ? ? line-height: 50px;? ? ? ? ? ? text-decoration: none;? ? ? ? ? ? text-align: center;? ? ? ? }? ? ? ? #menu ul li a:hover,? ? ? ? #menu ul li a.current {? ? ? ? ? ? color: #fff;? ? ? ? ? ? background: #0088bb;? ? ? ? }? ? ? ? * html, * html body {? ? ? ? ? ? background-image: url(about:blank);? ? ? ? ? ? background-attachment: fixed;? ? ? ? }? ? ? ? * html #menu {? ? ? ? ? ? position: absolute;? ? ? ? ? ? bottom: auto;? ? ? ? ? ? top: expression(100+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');? ? ? ? }? ? </style>? ? <script>? ? ? ? window.onload = function(){? ? ? ? ? ? window.onscroll = function(){? ? ? ? ? ? ? ? var top = document.body.scrollTop || document.documentElement.scrollTop;? ? ? ? ? ? ? ? var menus = document.getElementById('menu').getElementsByTagName('a');? ? ? ? ? ? ? ? var items = document.getElementById('content').getElementsByTagName('div');? ? ? ? ? ? ? ? var currentId = '';? ? ? ? ? ? ? ? for (var i = 0; i < items.length; i++) {? ? ? ? ? ? ? ? ? ? var _itemTop = items[i].offsetTop;? ? ? ? ? ? ? ? ? ? if(top > _itemTop - 200){? ? ? ? ? ? ? ? ? ? ? ? currentId = items[i].getAttribute('id');? ? ? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? ? ?break;? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? if(currentId){? ? ? ? ? ? ? ? ? ? for (var j = 0; j < menus.length; j++) {? ? ? ? ? ? ? ? ? ? ? ? var _href = menus[j].getAttribute('href');? ? ? ? ? ? ? ? ? ? ? ? if( _href == currentId){? ? ? ? ? ? ? ? ? ? ? ? ? ? menus[j].setAttribute('class','current');? ? ? ? ? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? ? ? ? ? menus[j].setAttribute('class',' ');? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? }? ? </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 數(shù)碼</a></li>? ? ? ? <li><a href="#item5">5F 母嬰</a></li>? ? </ul></div><div id="content">? ? <h1>地狗購物網(wǎng)</h1>? ? <div id="item1" class="item">? ? ? ? <h2>1F 男裝</h2>? ? ? ? <ul>? ? ? ? ? ? <li><a href="#"><img src="1F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="1F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="1F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="1F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="1F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="1F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="1F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="1F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="1F.jpg" alt=""/></a></li>? ? ? ? </ul>? ? </div>? ? <div id="item2" class="item">? ? ? ? <h2>2F 女裝</h2>? ? ? ? <ul>? ? ? ? ? ? <li><a href="#"><img src="2F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="2F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="2F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="2F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="2F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="2F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="2F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="2F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="2F.jpg" alt=""/></a></li>? ? ? ? </ul>? ? </div>? ? <div id="item3" class="item">? ? ? ? <h2>3F 美妝</h2>? ? ? ? <ul>? ? ? ? ? ? <li><a href="#"><img src="3F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="3F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="3F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="3F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="3F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="3F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="3F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="3F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="3F.jpg" alt=""/></a></li>? ? ? ? </ul>? ? </div>? ? <div id="item4" class="item">? ? ? ? <h2>4F 數(shù)碼</h2>? ? ? ? <ul>? ? ? ? ? ? <li><a href="#"><img src="4F.png" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="4F.png" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="4F.png" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="4F.png" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="4F.png" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="4F.png" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="4F.png" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="4F.png" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="4F.png" alt=""/></a></li>? ? ? ? </ul>? ? </div>? ? <div id="item5" class="item">? ? ? ? <h2>5F 母嬰</h2>? ? ? ? <ul>? ? ? ? ? ? <li><a href="#"><img src="5F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="5F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="5F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="5F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="5F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="5F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="5F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="5F.jpg" alt=""/></a></li>? ? ? ? ? ? <li><a href="#"><img src="5F.jpg" alt=""/></a></li>? ? ? ? </ul>? ? </div></div></body></html>
請幫忙看看實現(xiàn)不了定位導(dǎo)航的原因，能力不足，實在找不到
Urahara
2016-10-23 11:19:41
