为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/网页定位导航特效

不知道哪错了

控制台没有报错，滚动就是没有效果

<script>

//根据类名获取元素
function getByClassName(obj,cls){
	var ele=obj.getElementsByTagName('*');
	var result=[];
	for (var i=0;i<ele.length;i++){
		if (ele[i].ClassName==cls)
		{
			result.push(ele[i]);
			
		}
		return result;
	}

}



window.onload=function(){
	var mem=document.getElementsByClassName('mem');
	for (var i=0;i<mem.length;i++)
	{
	mem[i].onmouseover=function(){
		this.style.border='2px solid #999';
	}
	mem[i].onmouseout=function(){
		this.style.border='1px solid #c2c2c2';
	}
	}
	
	var img=document.getElementsByTagName('img');
	for (var i=0;i<img.length;i++)
	{
		img[i].onmouseover=function(){
		this.style.opacity='0.8';
	}
	img[i].onmouseout=function(){
		this.style.opacity='1';
	}
	}
	
	
	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=obj.replace(reg,"");
		}
	};
	
	function addClass(obj,cls)
	{
		if (!hasClass(obj,cls))
		{
			obj.ClassName+= " "+cls;
		}
		
		
	}
	
	
	
	
	window.onscroll=function(){
		var top=document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;
		var menus=document.getElementById('menu').getElementsByTagName('a');
		var pics=getByClassName(document.getElementById('pic'),'mem');
		var currentId="";
		for (var i=0;i<pics.length;i++)
		{
			var pic=pics[i];
			var picTop=pic.offsetTop;
			if (top>picTop-200)
			{
				currentId=pic.id;
			}
			else 
			{
				break;				
			}
			if (currentId)
			{
				for (var j=0;j<menus.length;j++)
				{
					var menu=menus[j];
					var hre=menu.href.split('#');
					if (hre[hre.length-1]!=currentId)
					{
						menu.removeClass(menu,"first");
					}
					else {menu.addClass(menu,"first");}
				
				
				}
				
			}
			
		}
		
		
	}
		
}
</script>
<body>

<div id="menu">
		<ul>
				<li><a href="#pic1" class="first">新加坡</a></li>
				<li><a href="#pic2">马来西亚</a></li>
				<li><a href="#pic3">三亚</a></li>
				<li><a href="#pic4">泰国</a></li>
				<li><a href="#pic5">台湾</a></li>
		</ul>
</div>


<div id="pic">
	<h2>遥祝安好</h2>
	<div id="pic1" class="mem">
	
		<h4>新加坡</h4>
		<br />

		<ul>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t0165425a5c9db4e230.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t0165425a5c9db4e230.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t0165425a5c9db4e230.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t0165425a5c9db4e230.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t0165425a5c9db4e230.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t0165425a5c9db4e230.jpg" /></a></li>
		</ul>
		
	</div>
	<div id="pic2" class="mem">
		<h4>马来西亚</h4>
		<br />

		<ul>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery1.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery1.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery1.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery1.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery1.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery1.jpg" /></a></li>
		</ul>
	</div>
	<div id="pic3" class="mem">
		<h4>三亚</h4>
		<br />

		<ul>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01c1b4fa6a4fe8ea57.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01c1b4fa6a4fe8ea57.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01c1b4fa6a4fe8ea57.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01c1b4fa6a4fe8ea57.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01c1b4fa6a4fe8ea57.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01c1b4fa6a4fe8ea57.jpg" /></a></li>
		</ul>
	</div>
	<div id="pic4" class="mem">
		<h4>泰国</h4>
		<br />

		<ul>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01a0df86b676757198.jpg"/></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01a0df86b676757198.jpg"/></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01a0df86b676757198.jpg"/></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01a0df86b676757198.jpg"/></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01a0df86b676757198.jpg"/></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01a0df86b676757198.jpg"/></a></li>
		</ul>
	</div>
	<div id="pic5" class="mem">
		<h4>台湾</h4>
		<br />

		<ul>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery2.jpg"/></a></li>
	<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery2.jpg"/></a></li>
	<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery2.jpg"/></a></li>
	<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery2.jpg"/></a></li>
	<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery2.jpg"/></a></li>
	<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery2.jpg"/></a></li>
	</ul>
	</div>
</div>
		
			
	
	
	
	
	
</body>


慕用9244143

2017-05-07

源自：网页定位导航特效  6-3

关注问题 我要回答
967
操作
收起

正在回答

1 回答

扣肉麦
2017-05-15 
<script>
 
//根据类名获取元素
function getByClassName(obj,cls){
    var ele=obj.getElementsByTagName('*');
    var result=[];
    for (var i=0;i<ele.length;i++){
        if (ele[i].className==cls)
        {
            result.push(ele[i]);
             
        }
        // return result;
    }
    return result;
 
}
 
 
 
window.onload=function(){
    var mem=document.getElementsByClassName('mem');
    for (var i=0;i<mem.length;i++)
    {
    mem[i].onmouseover=function(){
        this.style.border='2px solid #999';
    }
    mem[i].onmouseout=function(){
        this.style.border='1px solid #c2c2c2';
    }
    }
     
    var img=document.getElementsByTagName('img');
    for (var i=0;i<img.length;i++)
    {
        img[i].onmouseover=function(){
        this.style.opacity='0.8';
    }
    img[i].onmouseout=function(){
        this.style.opacity='1';
    }
    }
     
     
    function hasClass(obj,cls)
    {
        // return obj.ClassName.match(new RegExp("(\\s|^"+cls+"(\\s|$)"));
        return obj.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"));
    }




    function removeClass(obj,cls)
    {
        // if (hasClass(obj.cls))
        if(hasClass(obj,cls))
        {
           // var reg=new RegExp("(\\s|^"+cls+"(\\s|$)");
           var reg=new RegExp("(\\s|^)"+cls+"(\\s|$)");
            // obj.ClassName=obj.replace(reg,"");
            obj.className=obj.className.replace(obj.className.match(reg)[0],"");
        }
    };
     
    function addClass(obj,cls)
    {
        if (!hasClass(obj,cls))
        {
           // obj.ClassName+= " "+cls;
           obj.className+= " "+cls;
        }
         
         
    }
     
     
     
     
    window.onscroll=function(){
        var top=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop;
        var menus=document.getElementById('menu').getElementsByTagName('a');
        var pics=getByClassName(document.getElementById('pic'),'mem');
        var currentId="";
        for (var i=0;i<pics.length;i++)
        {
            var pic=pics[i];
            var picTop=pic.offsetTop;
            if (top>picTop-200)
            {
            	// currentId=pic.id;
                currentId="#"+pic.getAttribute("id");
            }
            else 
            {
               // break;             
               return ;
            }
            if (currentId)
            {
                for (var j=0;j<menus.length;j++)
                {
                    var menu=menus[j];
                    // var hre=menu.href.split('#');
                    var hre=menu.getAttribute("href");
                    // if (hre[hre.length-1]!=currentId)
                    if(hre!=currentId)
                    {
                        // menu.removeClass(menu,"first");
                        removeClass(menu,"first");
                    }
                    else {// menu.addClass(menu,"first");
                    	addClass(menu,"first");
                	}
                 
                 
                }
                 
            }
             
        }
         
         
    }
         
}
</script>


0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
网页定位导航特效
  • 参与学习       71412    人
  • 解答问题       486    个

本课程讲解网页定位导航特效，仿天猫版地狗购物网，你值得拥有

进入课程

本课相似问答

3 回答求告知错在哪里了

2 回答我找了很久，都不知道哪里出错了。firebug也没有报错，请问出现这样的错误要如何调试？

3 回答我的代码不知道为什么运行不了，用的jq库是http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

1 回答哪里错了？？找错真的眼睛都看花了

3 回答实现不了啊亲，卡在这里好久了，哪里出错了呢~
搜索更多本课相关问答

不知道哪错了

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信