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
  • asp之家 网络编程 m.aspxhome.com