js实现楼层效果的简单实例
今天自己写个楼层效果,有一点烦躁,小地方犯错误。各位大神来修改不足啊!!!
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>楼层切换</title> <style> *{padding:0;margin:0;} li{list-style:none;} .mainimg{width:850px;height:700px;float:left;} .title{width:850px;height:50px;text-align:center;line-height:50px;} .floor{position:fixed;top:20px;right:20px;display:none;} .floorulli{width:70px;height:30px;text-align:center;line-height:30px;cursor:hand;cursor:pointer} .liStyle{background-color:red;} .loading{background:url("image/loading.gif")no-repeatcentercenter;} #back{cursor:hand;cursor:pointer;} </style> </head> <body> <divclass="main"id="main"> <h3class="title">图片欣赏</h3> <imgas="image/1.jpg"/> <imgas="image/2.jpg"/> <imgas="image/3.jpg"/> <imgas="image/4.jpg"/> <imgas="image/5.jpg"/> <imgas="image/6.jpg"/> <imgas="image/7.gif"/> <imgas="image/8.jpg"/> <imgas="image/9.jpg"/> <imgas="image/10.jpg"/> </div> <divclass="floor"id="floor"> <ulid="floorUl"> <li>第一张</li> <li>第二张</li> <li>第三张</li> <li>第四张</li> <li>第五张</li> <li>第六张</li> <li>第七张</li> <li>第八张</li> <li>第九张</li> <li>第十张</li> </ul> <pid="back">返回顶部</p></div><script>varmain=document.getElementById("main"); varfloor=document.getElementById("floor"); varimage=main.getElementsByTagName("img"); varfloorUl=document.getElementById("floorUl"); varli=floorUl.getElementsByTagName("li"); varback=document.getElementById("back"); window.onload=window.onscroll=function(){ varscrollTop=document.documentElement.scrollTop||document.body.scrollTop; varheight=document.documentElement.clientHeight||document.body.clientHeight; for(vari=0;i<image.length;i++){ image[i].className="loading"; if(delay(image[i]).top<scrollTop+height){ image[i].src=image[i].getAttribute("as"); } } if(scrollTop>=image[0].offsetTop){ floor.style.display="block"; }else{ floor.style.display="none"; } varnum=0; for(vari=0;i<image.length;i++){ if(scrollTop>=image[i].offsetTop){ num=i; } li[i].className=""; } li[num].className="liStyle"; for(vari=0;i<li.length;i++){ li[i].onclick=function(){ for(varj=0;j<li.length;j++){ if(this==li[j]){ document.documentElement.scrollTop=image[j].offsetTop; document.body.scrollTop=image[j].offsetTop; } } } } } vartime=null; back.onclick=function(){ functiongoBack(){ varss=document.documentElement.scrollTop||document.body.scrollTop; ss-=50; document.documentElement.scrollTop=ss; document.body.scrollTop=ss; if(ss<=0){ clearInterval(time); } } time=setInterval(goBack,1); } functiondelay(obj){ varl=0; vart=0; while(obj){ l=l+obj.offsetLeft; t=t+obj.offsetTop; obj=obj.offsetParent; } return{left:l,top:t}; } </script> </body> </html>
以上这篇js实现楼层效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。