js文字轮播

最新推荐文章于 2024-05-19 18:43:23 发布

weixin_44134551

最新推荐文章于 2024-05-19 18:43:23 发布

阅读量102

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44134551/article/details/114263062

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏


<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <style>
			#marquee{width: 252px;height: 30px;}
            #marquee p{height:30px;line-height: 30px;margin:0;float: left;}
        </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.offsetWidth;
				// console.log(scrollheight)
                var firstNode = marquee.children[0].cloneNode(true);
                marquee.appendChild(firstNode);//还有这里
                setInterval(function(){
                    if(offset == 252){
                        offset = 0;
                    }
                    marquee.style.marginLeft = "-"+offset+"px";
                    offset += 1;
                },50);
            })();
        </script>
    </body></html>

weixin_44134551

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js文字轮播

<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> </head> <body> <style> #marque.
复制链接

扫一扫