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



<!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. web前端工程师学习之路开启（前言）
			
    web前端工程师需要掌握的所有技能 图解1: 图解2:
    
			
    2. 
						
  2. ZOJ 1642
			
    题意:有两个字符串,每个串由n个字符组成,每个字符有一个价值,Roy每次指定串2中的一个字符,他的得分增加的值为这个字符的价值,然后把两个串中这个字符前面的那部分(包括这个字符)删掉,重复进行这样的操 ...
    
			
    3. 
						
  3. 《Boost程序库完全开发指南》读书笔记-日期时间
			
    ●timer库 #include <boost\timer.hpp> #include <boost\progress.hpp> 1.timer类 // timer类的示例.  ...
    
			
    4. 
						
  4. Winform控件缩写
			
    控件名称 缩写 Buttom按钮 Btn CheckBox复选框 Chk ColumnHeader视图列表头 Col ComboBox组合框 Cbo ContextMenu快捷菜单 Ctm DataG ...
    
			
    5. 
						
  5. 校门外的树 - Grids2808
			
    校门外的树 问题描述: 某校大门外长度为 L 的马路上有一排树,每两棵相邻的树之间的间隔都是1 米.我们 可以把马路看成一个数轴,马路的一端在数轴0 的位置,另一端在L 的位置:数轴上的每 个整数点, ...
    
			
    6. 
						
  6. S3C2440的GPIO
			
    S3C2440一共有A B C D E F G H J 共九组IO口,一共是130个,每组IO口的个数如下图所示, 其中A组IO口只有输出功能,没有输入功能, 关于GPXCON寄存器,这个寄存器用来配 ...
    
			
    7. 
						
  7. 钢管下料问题（钢管用量最少）Lingo求解
			
    大家好,我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang !钢管下料问题1(钢管用量最少) 题目: 钢管原料   每根19m 客户需求   4m   50根 ...
    
			
    8. 
						
  8. Android ActionBar 返回为NULL
			
    AndroidBar返回为NULL.是因为values-v11和values-v14下面的style的主题的设置的原因. 在SDK 11的设备上,会使用第二处,SDK 14会使用第三处. 只需要将三个 ...
    
			
    9. 
						
  9. node实现创建服务器获取wx jssdk签名
			
    // system module var http = require("http"); var https = require("https"); var u ...
    
			
    10. 
						
  10. Codeforces 479E Riding in a Lift
			
    http://codeforces.com/problemset/problem/432/D 题目大意: 给出一栋n层的楼,初始在a层,b层不能去,每次走的距离必须小于当前位置到b的距离,问用电梯来回 ...
    
			
    11.