文字上下轮播效果

时间：2021-03-03 14:56:36 阅读：20 评论：0 收藏：0 [点我收藏+]

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            #div1 {
                top: 100px;
                position: relative;
                border: 1px solid black;
                width: 300px;
                height: 300px;
                margin: 10px auto;
                overflow: hidden;
                background-color: lightblue;
            }

            #div1 ul {
                position: absolute;
                left: 0;
            }

            #div1 ul li {
                list-style: none;
                float: left;
                width: 200px;
                height: 30px;
                padding: 10px;
            }
        </style>
        <script>
            window.onload = function() {
                var oDiv = document.getElementById(‘div1‘);
                var oUl = oDiv.getElementsByTagName(‘ul‘)[0];
                var aLi = oUl.getElementsByTagName(‘li‘);
                var timer = null;
                var iSpeed = -5;
                oUl.innerHTML += oUl.innerHTML;
                oUl.style.height = aLi.length * aLi[0].offsetHeight + ‘px‘;
                timer = setTimeout(fnMove, 100);
                oDiv.onmouseover = function() {
                    clearInterval(timer);
                }
                oDiv.onmouseout = function() {
                    clearInterval(timer);
                    timer = setInterval(fnMove, 100);
                }

                function fnMove() {
                    if (oUl.offsetTop < -oUl.offsetHeight / 2) {
                        oUl.style.top = 0;
                    }
                    oUl.style.top = oUl.offsetTop + iSpeed + ‘px‘;
                    if ((oUl.offsetTop % 50) == 0) {
                        clearInterval(timer);
                        timer = setTimeout(fnMove, 2000);

                    } else {
                        clearInterval(timer);
                        timer = setTimeout(fnMove, 100);
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="div1">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>
    </body>
</html>

技术分享图片

文字上下轮播效果

原文：https://www.cnblogs.com/siyueshini/p/14473600.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)