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



<!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. uva 280 - Vertex
			
    #include <iostream> #include <cstdio> using namespace std; #include <vector> #defi ...
    
			
    2. 
						
  2. php 图片上传预览(转)
			
    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
    
			
    3. 
						
  3. 恢复root用户目录，及~目录
			
    普通帐号登su;mkdir /root;chown root:root /root cp -R /etc/skel/.[!.]* ./
    
			
    4. 
						
  4. iOS 容易引“起循环引用”的三种场景
			
    笔者在阅读中总结了一下,在iOS平台容易引起循环引用的四个场景: 一.parent-child相互持有.委托模式 [案例]:   @interface FTAppCenterMainViewContr ...
    
			
    5. 
						
  5. [每日一题JS] 正则表达式
			
    判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母.数字.下划线,总长度为5-20 var reg = /\b[a-zA-Z]{1}[a-zA-Z0-9_]{4,19}\b/; var fl ...
    
			
    6. 
						
  6. JUnit使用Eclipse建立Test Case - 就是爱Java
			
    传统的测试方式,是以main(),作为代码的起点,而这次Mix将利用JUnit 进行测试,Eclipse有提供完整的整合环境,可以方便地使用JUnit,让Mix快速地进行单元测试,首先,开始撰写第1个 ...
    
			
    7. 
						
  7. 功率和dB的关系
			
    功率和dB的关系应该如下: 1.dB的引入是为了把乘除关系变换为加减,便于工程中的运算. 2.[dB] = 10lg(输出功率W/输入功率W).如:输入功率为1W而输出功率为1000W,则系统的增益为 ...
    
			
    8. 
						
  8. 基于异步的MVC  webAPI控制器
			
    MVC – Task-based Asynchronous Pattern (TAP) – Async Controller and SessionLess Controller Leave a re ...
    
			
    9. 
						
  9. QT类的继承结构
			
    QT类的继承结构 QT的类 core 数据集合 QString 几何类 QPoint QSize QRectangle 系统类 QColor QFont QImage QIcon QCursor QB ...
    
			
    10. 
						
  10. TranslateAnimation详解
			
    TranslateAnimation详解 Android JDK为我们提供了4种动画效果,分别是: AlphaAnimation,RotateAnimation, ScaleAnimation, Tr ...
    
			
    11.