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



<!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. js判断是否微信浏览器打开
			
    function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)==&qu ...
    
			
    2. 
						
  2. ECSTORE2.0 下载 （变量标签）
			
    条目 用途 备注 coupon.mc.use_times 优惠券可用次数 - security.guest.enabled 是否支持非会员购物 - site.version version的最后修改时 ...
    
			
    3. 
						
  3. php 中PHP_EOL使用
			
    一个小小的换行,其实在不同的平台有着不同的实现,为什么要这样,可以是世界是多样的.本来在unix世界换行就用/n来代替,但是windows为了体现他的不同,就用/r/n,更有意思的是在mac中用/r. ...
    
			
    4. 
						
  4. linux 下编译安装php
			
    系统环境: CentOS 6.5 x86_64 下载 PHP 源码包 # wget http://cn2.php.net/distributions/php-5.5.9.tar.bz2 # tar x ...
    
			
    5. 
						
  5. IIC 概述之2
			
    一.协议 1.空闲状态 I2C总线总线的SDA和SCL两条信号线同时处于高电平时,规定为总线的空闲状态.此时各个器件的输出级场效应管均处在截止状态,即释放总线,由两条信号线各自的上拉电阻把电平拉高.  ...
    
			
    6. 
						
  6. 关于Linux平台malloc的写时拷贝(延迟分配)【转】
			
    Linux内核定义了“零页面”(内容全为0的一个物理页,且物理地址固定),应用层的内存分配请求,如栈扩展.堆分配.静态分配等,分配线性地址后,就将页表项条目指向“零页面”(指定初始值的情况除外),这样 ...
    
			
    7. 
						
  7. Spark学习笔记--stage和task的划分
			
    https://github.com/JerryLead/SparkInternals/blob/master/markdown/3-JobPhysicalPlan.md stage 和 task 的 ...
    
			
    8. 
						
  8. BZOJ 2115: [Wc2011] Xor
			
    2115: [Wc2011] Xor Time Limit: 10 Sec  Memory Limit: 259 MB Submit: 2794  Solved: 1184 [Submit][Stat ...
    
			
    9. 
						
  9. 绝美Sysinternals
			
    啥也不说了,自己看吧: https://technet.microsoft.com/en-us/sysinternals/bb545046 新地址: https://technet.microsoft ...
    
			
    10. 
						
  10. Java7新语法 －try-with-resources
			
    http://docs.oracle.com/javase/7/docs/technotes/guides/language/try-with-resources.html The try-with- ...
    
			
    11.