网站侧边功能导航栏--屏幕滚动效果

最新推荐文章于 2024-03-01 16:38:38 发布

秋天1014童话

最新推荐文章于 2024-03-01 16:38:38 发布

阅读量2.3k

点赞数 2

分类专栏： web前端 javaScript CSS3

本文链接：https://blog.csdn.net/u013217071/article/details/53612127

版权

web前端同时被 3 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

CSS3

27 篇文章 0 订阅

订阅专栏

屏幕滚动效果：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul,ol {
            list-style-type: none;
        }
        * {margin:0;padding:0;}
        html,body {
            width: 100%;
            height: 100%;
        }
        #ul {
            width: 100%;
            height: 100%;
        }
        ul li{
            width: 100%;
            height: 100%;
        }
        #ol {
            position: fixed;
            top:0;
            left:50px;
        }
        #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","blue","green"];
            var leader = 0,target = 0,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);
                    target = ulBoxLi[this.index].offsetTop; // 核心语句
                    timer = setInterval(function() {
                        leader = leader + (target - leader ) /10;
                        window.scrollTo(0,leader); // 屏幕滑动
                        //pic.style.left = leader  + 'px';
                    },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>

这里写图片描述

秋天1014童话

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
网站侧边功能导航栏--屏幕滚动效果

屏幕滚动效果：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul,ol { list-style-type: none; } * {margin:0;padding:0;}
复制链接

扫一扫

专栏目录