今天自己写个楼层效果，有一点烦躁，小地方犯错误。各位大神来修改不足啊！！！



<!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实现楼层效果的更多相关文章
	

    
								
  1. React.js实现原生js拖拽效果及思考
		
    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
    
		
    2. 
						
  2. 用js实现动画效果核心方式
		
    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
    
		
    3. 
						
  3. js拖拽效果
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    4. 
						
  4. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
		
    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
    
		
    5. 
						
  5. 原生JS实现分页效果1.0
		
    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
    
		
    6. 
						
  6. 使用JS实现手风琴效果
		
    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
    
		
    7. 
						
  7. js弹窗登录效果(源码)--web前端
		
    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
    
		
    8. 
						
  8. 原生JS实现弹幕效果
		
    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
    
		
    9. 
						
  9. JS添加标签效果
		
    JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Turtle库
			
    下列turtle库的简单常用指令 forward(distance) #将箭头移到某一指定坐标 left(angel) right(angel) penup() #提起笔,用于另起一个地方绘制时 ...
    
			
    2. 
						
  2. Python subprocess执行持续输出shell命令的控制
			
    研究了大半天,为了获取持续输出的shell指令结果,并对结果进行分析,一直因为无法控制subprocess开启的子进程头疼,研究了半天,参考众多大神的博客后,终于实现,目前已时间为控制点,在实际业务中 ...
    
			
    3. 
						
  3. Hex文件
			
    那么什么是Hex文件呢?Intel Hex文件是由一行行符合Intel Hex文件格式的文本所构成的ASCII文本文件.在Intel Hex文件中,每一行包含一个Hex记录.这些记录由对应机器语言码和 ...
    
			
    4. 
						
  4. Proguard中optimize设置不当引发SimException
			
    今天来说一下Proguard中关于optimize的问题.先上一张异常图片 最近项目重构,重新调整了各个组件之间的依赖关系.过程中,在项目Proguard这块卡住了,最开始还好,Proguard只是提 ...
    
			
    5. 
						
  5. Android 改变标题栏的背景色
			
    1:styles.xml <!-- Activity theme --> <style name="CustomTheme" parent="andro ...
    
			
    6. 
						
  6. 自制单片机之四……LCD1602的驱动
			
    LCD1602已很普遍了,具体介绍我就不多说了,市面上字符液晶绝大多数是基于HD44780液晶芯片的,控制原理是完全相同的,因此HD44780写的控制程序可以很方便地应用于市面上大部分的字符型液晶.字 ...
    
			
    7. 
						
  7. js深入研究之神奇的匿名函数类生成方式
			
    <script type="text/javascript"> var Book = (function() { // 私有静态属性 ; // 私有静态方法 funct ...
    
			
    8. 
						
  8. 【转】ubuntu12.04完美安装QQ2012、QQMusic、Foxmail等--wine
			
    原文网址:http://blog.csdn.net/hanmengaidudu/article/details/17616921 其实在这之前,试过无数次的wine模拟,没有一次成功的,也不能说是不成 ...
    
			
    9. 
						
  9. requireJS define require
			
    原文地址:http://blog.csdn.net/xiaogou56a/article/details/21340213 define 用来定义模块 require 用来加载模块 1 因为定义一个模 ...
    
			
    10. 
						
  10. CentOS6.5下安装wine
			
    系统信息: Centos 6.5 i386 GUN/Linux 1. 首先安装一个epel rpm -ivh http://mirrors.yun-idc.com/epel/6/i386/epel-r ...
    
			
    11.