下面小编就为大家带来一篇 js 实现楼层效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
今天自己写个楼层效果,有一点烦躁,小地方犯错误。各位大神来修改不足啊!!!
- <!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 实现楼层效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0305/264268.html