网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 js实现楼层效果的简单实例
内容
    下面小编就为大家带来一篇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 id="main">
    <h3>图片欣赏</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 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 © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/18 11:05:41