今天自己写个楼层效果,有一点烦躁,小地方犯错误。各位大神来修改不足啊!!!
<!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实现楼层效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月20日
2024年11月20日
- 谭嘉仪-EyesOnMe新曲+精选2022【低速原抓WAV+CUE】
- 尚士达《莫回头》[320K/MP3][184.64MB]
- 尚士达《莫回头》[Hi-Res][24bit 48kHz][FLAC/分轨][1.27G]
- 群星《奔赴!万人现场 第3期》[320K/MP3][98.9MB]
- 谭嘉仪《Lonely》【WAV+CUE】
- 群星《红色钢琴浪漫曲》2CD【WAV+CUE】
- 凤飞飞《浮世情怀》HQCD[正版原抓WAV+CUE]
- 群星《奔赴!万人现场 第3期》[FLAC/分轨][537.75MB]
- 群星 《2024好听新歌23》十倍音质 U盘音乐 [WAV分轨][1.6G]
- 群星《妙音纪念珍藏版》蓝光BSCD[WAV+CUE][1G]
- 【发烧试音】蔡克信严讯人间天籁》[原抓WAV+CUE]
- [ABC唱片]山姆泰勒《西电之声·萨克斯风》[低速原抓WAV+CUE]
- 童丽《微风细雨XRCD2》[原抓WAV+CUE]
- 群星 《车乐坊1》DTS魔音[WAV+CUE][1.7G]
- 邓丽君.2024 -《生誕70年ベスト?アルバム 沒後30年》环球日版 [WAV+分轨][993M]