web前端（001_滚动效果）

来源：互联网发布：靠谱的代购淘宝店推荐编辑：程序博客网时间：2024/05/19 15:41
示例：
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>
0 0