*{margin:0; padding:0;}
ul,ol{list-style:none;}
img {border:none;}
a {text-decoration:none;}
#container {position:relative;}
#item-1,#item-2,#item-3,#item-4,#item-5 {color:#fff; height:300px;}
#item-1 {background:#156D8E;}
#item-2 {background:red;}
#item-3 {background:green;}
#item-4 {background:blue;}
#item-5 {background:#F06;}
ul {position:fixed; right:10px; top:10px;}
ul li {color:#000; background:#fff; height:20px; margin-top:10px; cursor:pointer; border:1px solid #000;}
ul li.active {background:red; color:#fff; border:1px solid #fff;}
ul li a {line-height:20px;}
function hasClass(obj, sCls){
return obj.className.match(new RegExp("\\b"+sCls+"\\b", "i"));
//match是string對(duì)象的一個(gè)方法，返回字符串對(duì)象
}
function addClass(obj, sCls){
var blank=(obj.className!="")?" ":"";
if(!hasClass(obj, sCls))obj.className+=blank+sCls;
}
function removeClass(obj, sCls){
var re=new RegExp("(\\s|^)"+sCls+"(\\s|$)", "i"); // \s表示空白字符
if(hasClass(obj, sCls))obj.className=obj.className.replace(re, "");
}
function getAbsPos (obj){ //此方法不計(jì)算margin和border值，如果設(shè)置會(huì)報(bào)錯(cuò)
var x = obj.offsetLeft;
var y = obj.offsetTop;
while(obj = obj.offsetParent){
x += obj.offsetLeft;
y += obj.offsetTop;
}
return {"x": x, "y": y};
}
function getByClass(obj, sCls){
var aEle=document.getElementsByTagName("*");
var aResult=[];
var reg=new RegExp("\\b"+sCls+"\\b", "i");
for(var i=0;i
if(reg.test(aEle[i].className))aResult.push(aEle[i]);
}
return aResult;
}
function slideTo(obj, iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var currentPos=document.documentElement.scrollTop || document.body.scrollTop, iSpeed=0;
iSpeed=(iTarget-currentPos)/8;
iSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iTarget!=currentPos){
window.scrollTo(0,currentPos+iSpeed);
}
else{
clearInterval(obj.timer);
}
},1);
}
function slideActive(obj, objCls, aTarget, num){
if(obj){
removeClass(obj, objCls);
}
addClass(aTarget[num].parentNode, objCls);
}
window.onload=function(){
var aNav=document.getElementsByTagName("ul")[0].getElementsByTagName("a");
var aItem=document.getElementById("container").getElementsByTagName("div");
for(var i=0;i
aNav[i].onclick=function(){
var targetId=this.attributes["data"].nodeValue;
var target=document.getElementById(targetId);
var targetScroll=getAbsPos(target).y;
slideTo(this, targetScroll);
if(hasClass(this, "active")) return false;
}
}
window.onscroll=function(){
var currentTop=document.documentElement.scrollTop || document.body.scrollTop;
var oActive=getByClass(document.body, "active")[0];
if(aItem.length==0 || currentTop<=getAbsPos(aItem[0]).y)
slideActive(oActive, "active", aNav, 0);
if(currentTop>=getAbsPos(aItem[aItem.length-1]).y)
slideActive(oActive, "active", aNav, aNav.length-1);
for(var k=0;k
if(currentTop>=getAbsPos(aItem[k]).y && currentTop
slideActive(oActive, "active", aNav, k);
}
};
};
--------? ? 我? 在? 頂? 端? ? --------
我是樓層1
我是樓層2
我是樓層3
我是樓層4
我是樓層5
--------? ? 我? 在? 底? 部? ? --------
