js實現(xiàn)樓層效果的簡單實例

更新時間：2016年07月15日 08:53:34 投稿：jingxian

下面小編就為大家?guī)硪黄猨s實現(xiàn)樓層效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

今天自己寫個樓層效果，有一點煩躁，小地方犯錯誤。各位大神來修改不足?。。?！

<!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實現(xiàn)樓層效果的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: