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



<!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. MySQL学习笔记(3) - 查询服务器版本，当前时间，当前用户
			
    SELECT VERSION(); --显示当前服务器版本 SELECT NOW(); --显示当前日期时间 SELECT USER(); --显示当前用户 MySQL中语句规范: 1.关键字和函数名 ...
    
			
    2. 
						
  2. nodemon 或者 Supervisor 监控 Express4.x的代码改动
			
    Express 4.x 默认将启动模块分离到了./bin/www中,直接使用 supervisor/nodemon 无法正常监控应用,使得开发过程中的调试非常不方便.所以我们直接把./bin/www中 ...
    
			
    3. 
						
  3. keypress和keydown事件及keyCode和keyChar
			
    二:keypress和keydown事件: 现只在IE10.chrome(版本 32.0.1700.107 m).firefox(25.0.1)中测试了.   IE8 chrome firefox $ ...
    
			
    4. 
						
  4. [Mugeda HTML5技术教程之8]添加行为
			
    上一节我们已经在新建的作品中添加了元素和动画,如果我们想要作品能够和用户互动,就需要给元素添加动作行为.在舞台上选中一个要添加动作的元素,在属性栏的动作下拉列表中选择一个动作.可选类别有链接.表单.行 ...
    
			
    5. 
						
  5. php 二维数组按照某value值求出最大值最小值
			
    //商家的等级信息是一个二维数组,求出最小折扣和最大折扣array(0=>array('levelname'=>'银','dis'=>7.5), 1=>array('level ...
    
			
    6. 
						
  6. 常用meta标签整理
			
    < meta > 元素 概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 we ...
    
			
    7. 
						
  7. iOS学习之根据文本内容动态计算文本框高度的步骤
			
    在视图加载的过程中,是先计算出frame,再根据frame加载视图的,所以在设计计算高度的方法的时候,设计成加号方法; //首先给外界提供计算cell高度的方法 + (CGFloat)heightFo ...
    
			
    8. 
						
  8. Nexus Root Toolkit教程—— 解锁与Root
			
    Nexus Root Toolkit是Nexus系列手机的专属root工具,本工具可为Nexus系列设备提供解锁.root和反解锁,还可以支持重要数据的备份和恢复.本教程以nexus 7二代和Nexu ...
    
			
    9. 
						
  9. 测试一下PHP官方的新一代PHP加速插件ZendOpcache的性能及配置
			
    过程不表,都比较顺利 参考如下URL: http://www.lvtao.net/server/ZendOpcache.html 大家知道目前PHP的缓存插件一般有三个:APC.eAccelerato ...
    
			
    10. 
						
  10. TextWatcher编辑框监听器
			
    TextWatcher tw = new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int sta ...
    
			
    11.