屏幕滑动效果

来源：互联网发布：西门子plc编程指令表编辑：程序博客网时间：2024/05/15 12:14

要想让ul下的li一个显示一屏幕，需要让html,body,ul,li的宽度和高度都是100%

下面代码好像有bug，当点击完ol后，用鼠标中轮就不能滚动了呢？
原来是因为缓动公式有问题，除不尽，所以就清不了定时器。后面再说！

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        *{            margin: 0;            padding: 0;        }        html,body{            width: 100%;            height: 100%;        }        ul,ol{            list-style-type: none;        }        #ul{            width: 100%;            height: 100%;        }        #ul li{            width: 100%;            height: 100%;            background-color: pink;        }        #ol{            position: fixed;            top: 0;            left: 60px;        }        #ol li{            width: 50px;            height: 50px;            border: 1px solid #000;        }    </style>    <script src="my.js" type="text/javascript"></script>    <script>        window.onload = function () {            var ulBox = $("ul");            var ulBoxLi = ulBox.children;            var olBox = $("ol");            var olBoxLi = olBox.children;            var bgColor = ["pink","purple","orange","green","blue"];            var start = 0,end =0;            var timer = null;            for(var i= 0;i<ulBoxLi.length;i++){                ulBoxLi[i].style.backgroundColor = bgColor[i];                olBoxLi[i].style.backgroundColor = bgColor[i];                olBoxLi[i].index = i;                olBoxLi[i].onclick = function () {                    clearInterval(timer);                    end = ulBoxLi[this.index].offsetTop;                    timer = setInterval(function(){                        start = start + (end - start)/10;                        window.scrollTo(0,start);                    },30);                }            }        }    </script></head><body><ul id="ul">    <li>首页</li>    <li>第二屏</li>    <li>第三屏</li>    <li>第四屏</li>    <li>第五屏</li></ul><ol id="ol">    <li>首页</li>    <li>第二屏</li>    <li>第三屏</li>    <li>第四屏</li>    <li>第五屏</li></ol></body></html>

0 0