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

来源：互联网发布：通达信数据导出编辑：程序博客网时间：2024/06/02 19:41
<!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>
运行效果如下：
0 0
分享 原生javaScript实现的楼层导航功能

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