北京三分彩是真是假:js实现楼层效果的简单实例

阅读:164次   时间:2017-08-12 19:08:05   字体:[ ]

香港三分彩 www.0gly8.cn 今天自己写个楼层效果,有一点烦躁香港三分彩,小地方犯错误。各位大神来修改不足?。。?!

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

 相关阅读
关于本站 - 广告服务 - 会员指南 - 香港三分彩
Copyright ©2003-2017 香港三分彩 All Rights Reserved
  • 乌鲁木齐市天山区设红榜黑榜 每月考核辖区卫生 2018-12-18
  • [大笑]小撸的眼睛在滴血…… 2018-12-18
  • 专家提醒中药需严格炮制配伍 市民自行配服中药风险比较大 2018-12-08
  • 高温养生“关键词”:防暑、降温、补水 2018-12-03
  • 新生儿6种异常不用慌 2018-12-03
  • 中央政治局会议(十八届) 2018-11-24
  • 为英烈权益划出法治红线(纵横) 2018-11-24
  • “新时代 新梦想”网络媒体新春走基层 2018-11-18
  • 对爱因斯坦歧视言论,中国人的反应却出人意料 2018-10-27
  • 国际中医药文化节,一场现代艺术碰触传统文化的盛会 2018-10-27
  • 《人民日报》八种版别称谓的介绍 2018-10-15
  • 马克思为什么要重构个人所有制?只有达成责权利平滑对接才有真正的自由! 2018-10-14
  • 毕业当援疆 去祖国最需要的地方 2018-10-12
  • 2018“文化和自然遗产日非遗影像展”平遥落幕 2018-10-12
  • 北非花园迎来足球春天 遭遇"死亡之组"拒绝跑龙套 2018-10-09
  • 818| 294| 552| 975| 900| 893| 318| 203| 900| 650|