<!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>楼层效果
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
