《js实现楼层效果的简洁实例_.docx》由会员分享，可在线阅读，更多相关《js实现楼层效果的简洁实例_.docx（7页珍藏版）》请在三一文库上搜索。
1、js实现楼层效果的简洁实例_ 下面我就为大家带来一篇js实现楼层效果的简洁实例。我觉得挺不错的，现在就分享给大家，也给大家做个参考。 !DOCTYPE html html lang=en head meta charset=UTF-8 title楼层切换/title style *padding: 0;margin: 0; lilist-style: none; .main imgwidth: 850px;height: 700px;float: left; .titlewidth: 850px;height: 50px;text-align: center;line-height: 50px
2、; .floorposition: fixed;top: 20px;right: 20px;display: none; .floor ul liwidth: 70px;height: 30px;text-align: center;line-height: 30px;cursor: hand;cursor: pointer .liStylebackground-color: red; .loadingbackground:url(image/loading.gif) no-repeat center center; #backcursor: hand;cursor: pointer; /st
3、yle /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=flo
4、orUl 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/divscript var main = document.getElementById(main); var floor = document.getElementById(floor); var image = main.getElementsByTagName(img); var floorUl = document.getElementById(floorUl
5、); 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
6、i = 0;i image.length; i+) imagei.className = loading; if(delay(imagei).top scrollTop + height) imagei.src = imagei.getAttribute(as); if(scrollTop = image0.offsetTop) floor.style.display = block; else floor.style.display = none; var num = 0; for(var i = 0; i image.length;i+) if(scrollTop = imagei.off
7、setTop) num = i; lii.className = ; linum.className = liStyle; for(var i = 0;i li.length;i+) lii.onclick = function() for(var j = 0;j li.length;j+) if(this = lij) document.documentElement.scrollTop = imagej.offsetTop; document.body.scrollTop = imagej.offsetTop; var time = null; back.onclick = functio
8、n() 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; returnleft:l,top:t; /script /body /html 以上这篇js实现楼层效果的简洁实例就是我分享给大家的全部内容了，盼望能给大家一个参考 .