js实现楼层效果的简单实例
作者:jingxian 发布时间:2024-06-07 15:26:01
标签: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>
0
投稿
猜你喜欢
- 对于手机、相机等设备拍摄的照片,由于手持方向的不同,拍出来的照片可能是旋转0°、90°、180°和270°。即使在电脑上利用软件将其转正,他
- 守护进程主进程创建子进程目的是:主进程有一个任务需要并发执行,那开启子进程帮我并发执行任务主进程创建子进程,然后将该进程设置成守护自己的进程
- 大家都知道,在通过Pyqt4的designer工具创建界面.ui文件后需要手动cmd命令将.ui文件转换为.py之后才能进行事件的编写,如果
- 本文实例讲述了JS扩展方法实现技巧。分享给大家供大家参考。具体分析如下:JS扩展方法与C#的扩展方法非常相似,也是可以链式调用的,也是通过对
- 迭代器即可以遍历诸如列表,字典及字符串等序列对象甚至自定义对象的对象,其本质就是记录迭代对象中每个元素的位置。迭代过程从第一个元素至最后一个
- 基本介绍break语句用于终止某个语句块的执行,用于中断当前for循环或跳出switch语句基本语法{..........break....
- Python 相对路径报错:"No such file or directory"'原因及解决方法如果你取相对路
- 以下函数采用FSO对象,文件位置在FSO.ASP。FSO对象的文件编码属性只有三种,系统默认,Unicode,ASCII,并没有我们要的ut
- 写过PHP+MySQL的程序员都知道有时间差,UNIX时间戳和格式化日期是我们常打交道的两个时间表示形式,Unix时间戳存储、处理方便,但是
- 加密接口怎么测试?(1)写个函数或者方法,把要加密的参数使用这个函数过滤一遍,等于就是说把数据丢进去,加密了之后,再通过这个加密好的数据传输
- 前言最近在学习python,学习到了一个之前没接触过的--特殊方法。什么是特殊方法?当我们在设计一个类的时候,python中有一个用于初始化
- 原理:TensorFlow使用的求导方法称为自动微分(Automatic Differentiation),它既不是符号求导也不是数值求导,
- 本文实例讲述了PHP模板引擎Smarty中变量的使用方法。分享给大家供大家参考,具体如下:一、概述:Smarty 是 PHP 众多模板引擎中
- python logging日志模块的详解日志级别日志一共分成5个等级,从低到高分别是:DEBUG INFO WARNING ERROR C
- PHP lcfirst() 函数实例把 "Hello" 的首字符转换为小写。:<?php echo lcfirst
- 前言centos 是自带python的。但是版本稍微旧一些。搞python开发,肯定要用新一点的稳定版。所以,要升级一下python。本文将
- 本文研究的主要是Python使用pickle模块存储数据报错解决方法,以代码的形式展示,具体如下。首先来了解下pickle模块pickle提
- 前言在Django使用Celery异步发送邮件的过程中,遇到Celery日志提示任务已接收,但实际上任务并没有执行,解决后特此记录。使用版本
- 因为有时直接使用pip install在线安装 Python 库下载速度非常慢,所以这里介绍使用 Anaconda 离线安装 Python
- 我们从一个测试开始。下面这个函数的功能是什么? def foo(lst): a = 0 for i in