屏幕滑动效果

最新推荐文章于 2024-04-06 19:24:11 发布

原创最新推荐文章于 2024-04-06 19:24:11 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章

订阅专栏

要想让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>