js实现楼层效果的简单实例

146 阅读 0 评论 97 点赞

我是靠谱客的博主小巧大神，最近开发中收集的这篇文章主要介绍js实现楼层效果的简单实例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天自己写个楼层效果，有一点烦躁，小地方犯错误。各位大神来修改不足啊！！！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>楼层切换</title>
<style>
*{padding: 0;margin: 0;}
li{list-style: none;}
.main img{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;}
.floor ul li{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-repeat center center;}
#back{cursor: hand;cursor: pointer;}
</style>
</head>
<body>
<div class="main" id="main">
<h3 class="title">图片欣赏</h3>
<img as="image/1.jpg"/>
<img as="image/2.jpg"/>
<img as="image/3.jpg"/>
<img as="image/4.jpg"/>
<img as="image/5.jpg"/>
<img as="image/6.jpg"/>
<img as="image/7.gif"/>
<img as="image/8.jpg"/>
<img as="image/9.jpg"/>
<img as="image/10.jpg"/>
</div>
<div class="floor" id="floor">
<ul id="floorUl">
<li>第一张</li>
<li>第二张</li>
<li>第三张</li>
<li>第四张</li>
<li>第五张</li>
<li>第六张</li>
<li>第七张</li>
<li>第八张</li>
<li>第九张</li>
<li>第十张</li>
</ul>
<p id="back">返回顶部</p></div><script> var main = document.getElementById("main"); 
var floor = document.getElementById("floor"); 
var image = main.getElementsByTagName("img"); 
var floorUl = document.getElementById("floorUl"); 
var li = floorUl.getElementsByTagName("li"); 
var back = document.getElementById("back"); 
window.onload = window.onscroll = function(){ 
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
var height = document.documentElement.clientHeight || document.body.clientHeight; 
for(var i = 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"; 
} 
var num = 0; 
for(var i = 0; i < image.length;i++){ 
if(scrollTop >= image[i].offsetTop){ 
num = i; 
} 
li[i].className = ""; 
} 
li[num].className = "liStyle"; 
for(var i = 0;i < li.length;i++){ 
li[i].onclick = function(){ 
for(var j = 0;j < li.length;j++){ 
if(this == li[j]){ 
document.documentElement.scrollTop = image[j].offsetTop; 
document.body.scrollTop = image[j].offsetTop; 
} 
} 
} 
} 
} 
var time = null; 
back.onclick = function() {
function goBack(){ 
var ss = 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); 
} 
function delay(obj){ 
var l = 0; 
var t = 0; 
while (obj){ 
l = l + obj.offsetLeft; 
t = t + obj.offsetTop; 
obj = obj.offsetParent; 
} 
return{left:l,top:t}; 
}
</script>
</body>
</html>

以上这篇js实现楼层效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。