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实现楼层效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。