js文字轮播

来源：互联网发布：吾爱营销软件编辑：程序博客网时间：2024/05/29 18:03

直接上代码：

<html>    <head>        <title>TODO supply a title</title>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width">    </head>    <body>        <style>            #marquee p{height:30px;line-height: 30px;margin:0}        </style>        <div style="height:30px;overflow:hidden;">            <div id='marquee'>                <p>第1段</p>                <p>第2段</p>                <p>第3段</p>                <p>第4段</p>                <p>第5段</p>            </div>        </div>         <script>            (function(){                var marquee = document.getElementById('marquee');                var offset=0;                var scrollheight =marquee.offsetHeight;                var firstNode = marquee.children[0].cloneNode(true);                marquee.appendChild(firstNode);//还有这里                setInterval(function(){                    if(offset == scrollheight){                        offset = 0;                    }                    marquee.style.marginTop = "-"+offset+"px";                    offset += 1;                },50);            })();        </script>    </body></html>

阅读全文

0 0