js实现楼层效果的简单实例
作者：jingxian 时间：2024-06-07 15:26:01
今天自己写个楼层效果，有一点烦躁，小地方犯错误。各位大神来修改不足啊！！！
<!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,楼层
0
投稿猜你喜欢
python绘制简单折线图代码示例
2022-06-28 11:08:31
查看vue-cli脚手架的版本号和vue真实版本号及详细操作命令
2023-07-02 17:04:20
php递归删除目录与文件的方法
2023-09-12 02:02:02
表单设计中的网页视觉体验
2008-06-26 13:35:00
python中torch.nn.identity()方法详解
2021-05-21 16:51:01
一步步教你MySQL查询优化分析教程
2024-01-27 09:56:23
详解Python数据可视化编程 - 词云生成并保存（jieba+WordCloud）
2023-08-22 18:03:06
Python利用hashlib实现文件MD5码的批量存储
2021-12-20 20:48:02
Access数据库用另一种方式管理密码
2008-10-13 12:25:00
使用标准的表单字段名
2008-06-30 14:14:00
MySQL笔记之运算符使用详解
2024-01-21 00:21:35
Python中使用Boolean操作符做真值测试实例
2021-05-31 01:18:19
PHP levenshtein()函数用法讲解
2023-06-01 15:20:29
asp 多关键词搜索的简单实现方法
2011-04-11 10:45:00
pandas如何统计某一列或某一行的缺失值数目
2023-02-10 21:36:00
MySQL InnoDB中的锁机制深入讲解
2024-01-13 14:41:40
深入理解Python爬虫代理池服务
2022-11-05 17:20:29
超详细图解修改pip install默认安装路径的方法
2023-02-18 05:00:09
Python使用Beautiful Soup实现解析网页
2022-11-21 19:17:22
sql server自动生成拼音首字母的函数
2024-01-25 15:27:19