html5的强大让我感觉越发兴奋,今天在写一个js demo---网页定位导航特效的时候,在涉及到页面的快速定位的时候,我还以为要用很复杂的js实现,结果之后才发现,html5有一个很酷的效果,虽然这个锚点特效只能支持Chrome，火狐，IE8以上等浏览器。但是在不考虑一些旧的浏览器的兼容情况的时候,可以使用,而且效果是杠杠的
在html5中,锚点使用id名称而不再是name属性了
demo 例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>山寨版购物网--实现网页定位导航系统</title>
<style>
body{margin: 0;padding: 0;}
h1{margin-left: 20px;}
.content{ width:1063px;margin: 0 auto;height: 5000px;}
ul{list-style: none;}
.item{width:826px;margin: 0 auto;height: 1000px;margin-bottom: 30px;border:1px dotted #0088bb;}
.item li{width:250px;height: 300px;float: left;display: inline;margin-right: 10px;border:1px solid #0088bb;}
.item h2{font-size: 16px;margin-bottom: 10px;clear: both;}
img{width:250px;height: 300px;}
#menu{ position: fixed;top:100px;left: 50%;margin-left: 380px;width: 80px;}
#menu 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;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#item1">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 class="content">
<h1>购物网</h1>
<div id="item1" class="item">
<h2>1F 洗浴</h2>
<ul>
<li><a href=""><img src="1.jpg" alt=""/></a></li>
<li><a href=""><img src="1.jpg" alt=""/></a></li>
<li><a href=""><img src="1.jpg" alt=""/></a></li>
<li><a href=""><img src="1.jpg" alt=""/></a></li>
<li><a href=""><img src="1.jpg" alt=""/></a></li>
<li><a href=""><img src="1.jpg" alt=""/></a></li>
<li><a href=""><img src="1.jpg" alt=""/></a></li>
<li><a href=""><img src="1.jpg" alt=""/></a></li>
<li><a href=""><img src="1.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 美妆</h2>
<ul>
<li><a href=""><img src="2.jpg" alt=""/></a></li>
<li><a href=""><img src="2.jpg" alt=""/></a></li>
<li><a href=""><img src="2.jpg" alt=""/></a></li>
<li><a href=""><img src="2.jpg" alt=""/></a></li>
<li><a href=""><img src="2.jpg" alt=""/></a></li>
<li><a href=""><img src="2.jpg" alt=""/></a></li>
<li><a href=""><img src="2.jpg" alt=""/></a></li>
<li><a href=""><img src="2.jpg" alt=""/></a></li>
<li><a href=""><img src="2.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 童装</h2>
<ul>
<li><a href=""><img src="3.jpg" alt=""/></a></li>
<li><a href=""><img src="3.jpg" alt=""/></a></li>
<li><a href=""><img src="3.jpg" alt=""/></a></li>
<li><a href=""><img src="3.jpg" alt=""/></a></li>
<li><a href=""><img src="3.jpg" alt=""/></a></li>
<li><a href=""><img src="3.jpg" alt=""/></a></li>
<li><a href=""><img src="3.jpg" alt=""/></a></li>
<li><a href=""><img src="3.jpg" alt=""/></a></li>
<li><a href=""><img src="3.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 书籍</h2>
<ul>
<li><a href=""><img src="4.jpg" alt=""/></a></li>
<li><a href=""><img src="4.jpg" alt=""/></a></li>
<li><a href=""><img src="4.jpg" alt=""/></a></li>
<li><a href=""><img src="4.jpg" alt=""/></a></li>
<li><a href=""><img src="4.jpg" alt=""/></a></li>
<li><a href=""><img src="4.jpg" alt=""/></a></li>
<li><a href=""><img src="4.jpg" alt=""/></a></li>
<li><a href=""><img src="4.jpg" alt=""/></a></li>
<li><a href=""><img src="4.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 数码</h2>
<ul>
<li><a href=""><img src="5.jpg" alt=""/></a></li>
<li><a href=""><img src="5.jpg" alt=""/></a></li>
<li><a href=""><img src="5.jpg" alt=""/></a></li>
<li><a href=""><img src="5.jpg" alt=""/></a></li>
<li><a href=""><img src="5.jpg" alt=""/></a></li>
<li><a href=""><img src="5.jpg" alt=""/></a></li>
<li><a href=""><img src="5.jpg" alt=""/></a></li>
<li><a href=""><img src="5.jpg" alt=""/></a></li>
<li><a href=""><img src="5.jpg" alt=""/></a></li>
</ul>
</div>
</div>
</body>
</html>
html5的功能还是很强大的,希望各浏览器能早日统一
1463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
