javascript网页定位导航的实现

最新推荐文章于 2022-11-10 16:24:57 发布

信念随梦

最新推荐文章于 2022-11-10 16:24:57 发布

阅读量1.4k

点赞数 1

分类专栏： js 文章标签： javascript web前端网页定位导航

本文链接：https://blog.csdn.net/hanxueyu666/article/details/51363824

版权

js 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文针对网页定位导航，用javascript进行效果实现。本文是慕课网的一个练习题，程序中，我注释掉的部分是其中的例题代码，我没有调通或者是根本没有必要那么写。

还有例题中用window.load来加载函数，不能实时刷新网页来进行显示，当滚动条滑动时需要刷新一下页面才能看到效果，所以我不其删掉，用定时器setInterval来控制，动作实时刷新

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页定位导航</title>

<style>
	*{
	margin: 0px;
	padding: 0px;
	}
	body{
		font-size:12px;
		line-height:1.7;
		}
	li{
		list-style:none;
		}
	#content{
		width:800px;
		margin:0 auto;
		padding:20px;
		}
	#content h1{
		color:#399;
		}
	#content .item{
		padding:20px;
		margin-bottom:20px;
		border:1px dotted #08b;
		}
	#content .item h2{
		font-size:16px;
		font-weight:bold;
		border-bottom:1px solid #08b;
		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:#333;
		width:80px;
		height:50px;
		line-height:50px;
		text-decoration:none;
		}
	#menu ul li a:hover,
	#menu ul li a.current{
		background-color:#08b;
		color:#FFF;}
</style>
<script>
	//因为IE浏览器没有getElementsByClassName,所以需要自己写一个方法来代替
	function getByClassName(obj,cls){
		var elements = obj.getElementsByTagName("*");
		var result = [];
		for(var i = 0;i<elements.length;i++){
			if(elements[i].className == cls){
				result.push(elements[i]);
				}
			}
			return result;
		}
	//这一部分没有必要，下文直接可以用className代替即可。
	/*function hasClass(obj,cls){
		return obj.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"))
		}
	function removeClass(obj,cls){
		if(hasClass(obj,cls)){
			var reg = new RegExp("(\\s|^)"+cls+"(\\s|$)");
			obj.className.replace(reg,"");
			}
		}
		
	function addClass(obj,cls){
		if(!hasClass(obj,cls)){
			obj.className =""+cls;
			}
		}*/
		
	/*window.onload =*/ function show(){
		//var top = document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;
		var top = document.documentElement.scrollTop|document.body.scrollTop;
		var menus = document.getElementById("menu").getElementsByTagName("a");
		var items = getByClassName(document.getElementById("content"),"item");
		var cirrentId = "";
		for(var i = 0;i<items.length;i++){
			var _item = items[i];
			var _itemtop = _item.offsetTop;
			if(top>_itemtop-300){
				currentId = _item.id;
				}
			else{
				break;
				}
			
			}
		if(currentId){
			for(var j = 0; j <menus.length;j++){
				var _menu = menus[j];
				var _href = _menu.href.split("#");
				if(_href[_href.length-1]!=currentId){
					//removeClass(_menu,"current");
					_menu.className = "";
					}
				else{
					//addClass(_menu,"current");
					_menu.className = "current";
					}
				}
			}
	}
	setInterval(show,1);
</script>
</head>

<body>
<div id="menu">
	<ul>
    	<li><a href="#item1" class="current">1F 男装</a>
        <li><a href="#item2" class="">2F 女装</a>
        <li><a href="#item3">3F 美妆</a>
        <li><a href="#item4">4F 数码</a>
        <li><a href="#item5">5F 母婴</a>
    </ul>
</div>
<div id="content">
	<h1>天狗购物</h1>
    <div id="item1" class="item">
    	<h2 >1F 男装</h2>
        <ul>
    	<li><a href="#"><img src="1.jpg"></a>
        <li><a href="#"><img src="1.jpg"></a>
        <li><a href="#"><img src="1.jpg"></a>
        <li><a href="#"><img src="1.jpg"></a>
        <li><a href="#"><img src="1.jpg"></a>
        <li><a href="#"><img src="1.jpg"></a>
        <li><a href="#"><img src="1.jpg"></a>
        <li><a href="#"><img src="1.jpg"></a>
        <li><a href="#"><img src="1.jpg"></a>
    </ul>
    </div>
    <div id="item2" class="item">
    	<h2>2F 女装</h2>
        <ul>
    	<li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
    </ul>
    </div>
    <div id="item3" class="item">
    	<h2>3F 美妆</h2>
        <ul>
    	<li><a href="#"><img src="3.jpg"></a>
        <li><a href="#"><img src="3.jpg"></a>
        <li><a href="#"><img src="3.jpg"></a>
        <li><a href="#"><img src="3.jpg"></a>
        <li><a href="#"><img src="3.jpg"></a>
        <li><a href="#"><img src="3.jpg"></a>
        <li><a href="#"><img src="3.jpg"></a>
        <li><a href="#"><img src="3.jpg"></a>
        <li><a href="#"><img src="3.jpg"></a>
    </ul>
    </div><div id="item4" class="item">
    	<h2>4F 数码</h2>
        <ul>
    	<li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
    </ul>
    </div>
    <div id="item5" class="item">
    	<h2>5F 母婴</h2>
        <ul>
    	<li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
        <li><a href="#"><img src="2.jpg"></a>
    </ul>
    </div>
</div>
</body>
</html>

显示效果图，只展示了开始的一部分内容，图片我是随便找的，只是为了掩饰效果