js实现楼层效果的简单实例
更新时间：2016年07月15日 08:53:34 投稿：jingxian
下面小编就为大家带来一篇js实现楼层效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
今天自己写个楼层效果，有一点烦躁，小地方犯错误。各位大神来修改不足啊！！！
<!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实现楼层效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
大家都知道JS是一门动态语言，与传统的c和c++最大的区别就是js是在运行时动态检测值的类型和变化。this是js中的一个关键字，它代表当前作用域的上下文环境，而且随着上下文的改变而动态变化。这篇文章我们将详细介绍Javascript中绑定this的三种方法与简单的比较。2016-10-10
这段时间做的一个项目，用到数组的地方很多，学了才知道js数组的功能强大很，远比VB,C#强多了2014-10-10
下面小编就为大家带来一篇浅析JavaScript中浏览器的兼容问题。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-04-04
这篇文章主要为大家详细介绍了微信小程序实现轮播图，适配机型，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
本文给大家分享使用for循环实现js生成简单的等差数列，具体实现方法，大家参考下本文2017-11-11
这篇文章主要为大家详细介绍了基于javascript实现图片滑动效果的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下2016-05-05
有时候我们只想要让某些脚步函数执行一次就算完成任务了。如何实现这种功能呢？简单模仿下面这段就可以轻松搞定了2010-06-06
有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总，一起看看吧2016-05-05
这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
这篇文章主要为大家详细介绍了javascript设计模式之中介者模式学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
最新评论