js实现楼层效果的简单实例


Posted in Javascript onJuly 15, 2016

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

<!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实现楼层效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 学习笔记 选择器之一
Jul 23 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
基于JavaScript实现轮播图代码
Jul 14 #Javascript
js轮播图代码分享
Jul 14 #Javascript
jQuery中deferred对象使用方法详解
Jul 14 #Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 #Javascript
基于jQuery的ajax方法封装
Jul 14 #Javascript
由浅入深剖析Angular表单验证
Jul 14 #Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 #Javascript
You might like
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
python实现聊天小程序
2018/03/13 Python
解决Django中多条件查询的问题
2019/07/18 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
JNI的定义
2012/11/25 面试题
两则小学生的自我评价分享
2013/11/14 职场文书
单位介绍信范文
2014/01/18 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
高校教师自荐信范文
2014/03/13 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
预备党员入党感想
2015/08/10 职场文书
放假通知怎么写
2015/08/18 职场文书
品德与社会教学反思
2016/02/24 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
Python Flask实现进度条
2022/05/11 Python
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技