web前端（001_滚动效果）

最新推荐文章于 2025-03-01 22:45:13 发布

原创最新推荐文章于 2025-03-01 22:45:13 发布 · 450 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web前端

html5 专栏收录该内容

6 篇文章

订阅专栏

本文主要探讨了如何在web前端实现细腻的滚动效果，通过JavaScript和CSS技术，为网页滚动添加平滑过渡、视差滚动等特效，提升用户体验。

示例：

marquee

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>滚动效果</title>
        <style type="text/css">
            div {
                border: 1px solid #E5E5E5;
            }

            ul {
                height: 200px;
                overflow: hidden;
            }

            li {
                line-height: 30px;
            }
        </style>
    </head>
    <body>
        <div style="height: 200px; overflow: hidden">
            <ul id="marquee" style="height: 170px">
                <li><a>测试01</a></li>
                <li><a>测试02</a></li>
                <li><a>测试03</a></li>
                <li><a>测试04</a></li>
                <li><a>测试05</a></li>
                <li><a>测试06</a></li>
                <li><a>测试07</a></li>
                <li><a>测试08</a></li>
                <li><a>测试09</a></li>
                <li><a>测试10</a></li>
            </ul>
        </div>
        <marquee>This text will scroll from right to left.</marquee>
        <script type="text/javascript">
            window.onload = function() {
                setTimeout(startmarquee(34, 50, 0, "marquee"), 1000);
            }
            function startmarquee(lh, speed, delay, id) {
                var t;
                var p = false;
                var o = document.getElementById(id);
                o.innerHTML += o.innerHTML + o.innerHTML + o.innerHTML;
                o.onmouseover = function() {
                    p = true;
                }
                o.onmouseout = function() {
                    p = false;
                }
                o.scrollTop = 0;
                function start() {
                    t = setInterval(scrolling, speed);
                    if (!p)
                        o.scrollTop += 2;
                }
                function scrolling() {
                    if (o.scrollTop % lh != 0) {
                        o.scrollTop += 2;
                        if (o.scrollTop >= o.scrollHeight / 2)
                            o.scrollTop = 0;
                    } else {
                        clearInterval(t);
                        setTimeout(start, delay);
                    }
                }
                setTimeout(start, delay);
            }
        </script>
    </body>
</html>