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的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
JS实现放烟花效果
Mar 10 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
基于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反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
PHP会话处理的10个函数
2015/08/11 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
奇妙的js
2007/09/24 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
用python实现百度翻译的示例代码
2018/03/09 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Python数据可视化之画图
2019/01/15 Python
pandas删除指定行详解
2019/04/04 Python
python文件选择对话框的操作方法
2019/06/27 Python
简单了解python中对象的取反运算符
2019/07/01 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
法学专业毕业生自荐信范文
2013/12/18 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
Redis高可用集群redis-cluster详解
2022/03/20 Redis