您的位置：首页 > Web前端 > JavaScript
分享原生javaScript实现的楼层导航功能

2016-04-02 21:08 736 查看
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{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;}
</style>
<script>

function hasClass(obj, sCls){

return obj.className.match(new RegExp("\\b"+sCls+"\\b", "i"));

//match是string对象的一个方法，返回字符串对象
}

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){		//此方法不计算margin和border值，如果设置会报错

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<aEle.length;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.length;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<aItem.length-1;k++){

if(currentTop>=getAbsPos(aItem[k]).y && currentTop<getAbsPos(aItem[k+1]).y)

slideActive(oActive, "active", aNav, k);

}
};

};

</script>
</head>

<body>
<div style="height:20px; width:100%; margin:0 auto; text-align:center;">--------    我  在  顶  端    --------</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="container">

<div id="item-1">我是楼层1</div>
<div id="item-2">我是楼层2</div>
<div id="item-3">我是楼层3</div>
<div id="item-4">我是楼层4</div>
<div id="item-5">我是楼层5</div>

<ul style="visibility:-hidden;">
<li><a data="item-1">跳到楼层1</a></li>
<li><a data="item-2">跳到楼层2</a></li>
<li><a data="item-3">跳到楼层3</a></li>
<li><a data="item-4">跳到楼层4</a></li>
<li><a data="item-5">跳到楼层5</a></li>
</ul>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="height:20px; width:100%; margin:0 auto; text-align:center;">--------    我  在  底  部    --------</div>
</body>
</html>
运行效果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航
分享 原生javaScript实现的楼层导航功能

分享原生javaScript实现的楼层导航功能
