<!DOCTYPE html><html><head><meta charset="utf-8"/><title>网页定位导航效果扩展案例</title><style> * { margin: 0; padding: 0; } body { font-size: 12px; line-height: 1.7; background-color: #888; } li { list-style: none; } #content { width: 1000px; margin: 0 auto; padding-top: 100px; padding-bottom: 700px; } #content.item{ position:relative; height:540px; } #content .item img { position: absolute; top: 100px; left: 50%; } #content #item1 { background: url("http://img1.sycdn.imooc.com//536c9ea800013ae610000540.jpg") no-repeat center top; } #content #item2 { background: url("http://img1.sycdn.imooc.com//536c9ecd0001606d10000540.jpg") no-repeat center top; } #content #item3 { background: url("http://img1.sycdn.imooc.com//536c9f0a0001ccc310000540.jpg") no-repeat center top; } #content #item4 { background: url("http://img1.sycdn.imooc.com//536c9f6700012e9010000540.jpg") no-repeat center top; } #content #item5 { background: url("http://img1.sycdn.imooc.com//536c9f800001b28510000540.jpg") no-repeat center top; } #menu{ position:fixed; top:100px; left:50%; margin-left:-700px; } #menu h1 { width: 200px; color: #fff; font-size: 14px; text-align: center; background: #ee1111; line-height: 30px; } #menu ul li a { display: block; margin: 5px 0; font-size: 12px; color: #ccc; width: 160px; padding: 10px 20px; text-decoration: none; text-align: left; border-bottom: 1px dashed #999; } #menu ul li a strong { color: #f1f1f1; } #menu ul li a:hover, #menu ul li a.current { color: #fff; background: #666; } /*ie6 hack*/ * html, * html body { background-image: url(about:blank); background-attachment: fixed; } * html #menu { /*position: fixed;*/ position: absolute; top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px'); }</style><script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script><script> $(document).ready(function () { $(window).scroll(function () { var items = $("#content").find(".item"); var menu = $("#menu"); var top = $(document).scrollTop(); var currentId = ""; //滚动条现在所在位置的item id items.each(function () { var m = $(this); //注意：m.offset().top代表每一个item的顶部位置 if (top > m.offset().top - 300) { currentId = "#" + m.attr("id"); } else { return false; } }); var currentLink = menu.find(".current"); if (currentId && currentLink.attr("href") != currentId) { currentLink.removeClass("current"); menu.find("[href=" + currentId + "]").addClass("current"); } }); }); </script></head><body> <div id="menu"> <h1>正在首发</h1> <ul> <li><a href="#item1" class="current"><strong>2014.04.09</strong><br>施华蔻0元赢Smart</a></li> <li><a href="#item2"><strong>2014.04.05</strong><br>alienware机皇限量抢</a></li> <li><a href="#item3"><strong>2014.04.04</strong><br>联想Miix2 3G平板电脑</a></li> <li><a href="#item4"><strong>2014.04.03</strong><br>御爵厨房垃圾处理器</a></li> <li><a href="#item5"><strong>2014.04.01</strong><br>中兴天机GRAND S II</a></li> </ul> </div> <div id="content"> <div id="item1" class="item"> <img src="http://img1.sycdn.imooc.com//536ca02800014e7105000400.jpg"> </div> <div id="item2" class="item"> <img src="http://img1.sycdn.imooc.com//536ca04b0001dbeb04520519.jpg"> </div> <div id="item3" class="item"> <img src="http://img1.sycdn.imooc.com//536ca06200016a4d03950387.jpg"> </div> <div id="item4" class="item"> <img src="http://img1.sycdn.imooc.com//536ca0ab0001c89205000400.jpg"> </div> <div id="item5" class="item"> <img src="http://img1.sycdn.imooc.com//536ca0830001b17f05000400.jpg"> </div> </div></body></html>
1 回答
KevenHuang
TA贡献280条经验 获得超233个赞
因为你绝对定位的left都是50%，而且你所有的图片都是用同一个样式，所以他们是在同一个位置的，所以会重叠。你给随便一个图片一个行内样式style="left:30%;"试试，保证不会再重叠。
添加回答
举报
0/150
提交
取消