不知道哪錯(cuò)了
控制臺(tái)沒有報(bào)錯(cuò)，滾動(dòng)就是沒有效果
<script>
//根據(jù)類名獲取元素
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">泰國(guó)</a></li> <li><a?href="#pic5">臺(tái)灣</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文件/未命名站點(diǎn)?2/t0165425a5c9db4e230.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t0165425a5c9db4e230.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t0165425a5c9db4e230.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t0165425a5c9db4e230.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t0165425a5c9db4e230.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t0165425a5c9db4e230.jpg"?/></a></li> </ul> </div> <div?id="pic2"?class="mem"> <h4>馬來西亞</h4> <br?/> <ul> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/scenery1.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/scenery1.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/scenery1.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/scenery1.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/scenery1.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/scenery1.jpg"?/></a></li> </ul> </div> <div?id="pic3"?class="mem"> <h4>三亞</h4> <br?/> <ul> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t01c1b4fa6a4fe8ea57.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t01c1b4fa6a4fe8ea57.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t01c1b4fa6a4fe8ea57.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t01c1b4fa6a4fe8ea57.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t01c1b4fa6a4fe8ea57.jpg"?/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t01c1b4fa6a4fe8ea57.jpg"?/></a></li> </ul> </div> <div?id="pic4"?class="mem"> <h4>泰國(guó)</h4> <br?/> <ul> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t01a0df86b676757198.jpg"/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t01a0df86b676757198.jpg"/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t01a0df86b676757198.jpg"/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t01a0df86b676757198.jpg"/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t01a0df86b676757198.jpg"/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/t01a0df86b676757198.jpg"/></a></li> </ul> </div> <div?id="pic5"?class="mem"> <h4>臺(tái)灣</h4> <br?/> <ul> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/scenery2.jpg"/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/scenery2.jpg"/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/scenery2.jpg"/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/scenery2.jpg"/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/scenery2.jpg"/></a></li> <li><a?href="#"><img?src="file:///D|/HTML文件/未命名站點(diǎn)?2/scenery2.jpg"/></a></li> </ul> </div> </div> </body>
2017-05-15
<script> ? //根據(jù)類名獲取元素 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>