js实现文字从右滚动到左边代码循环滚动实例

最新推荐文章于 2024-12-25 16:40:48 发布

任聪聪

最新推荐文章于 2024-12-25 16:40:48 发布

阅读量2.7w

点赞数 2

分类专栏： Javascript 文章标签： javascript 实例

本文链接：https://blog.youkuaiyun.com/hj960511/article/details/52458585

版权

Javascript 专栏收录该内容

44 篇文章

订阅专栏

说明：实现js文字从右边到左滚动循环的效果
适用：所有支持js的页面均可

效果图：
在这里插入图片描述

代码片段：

<html>
	<head>
    <meta charset="UTF-8">
	<title>js文字从右边到左滚动效果</title>
	<style>
		#static_big_box{
			position: relative;
			width:900px;
			margin:0 auto;
			height:30px;
			line-height:30px;
			padding-right:65px;
			overflow:hidden;
		}
		#runing_box{
			position: absolute;
			height:30px;
			line-height:30px;
			top: 0px;
			left:0;
		}
		#runing_box a{
			color:#fff;
			margin-left:8px;
		}
		#runing_box a:hover{
			color:#57bc54;
		}
		.content{
			background:#333;
		}
	</style>
	</head>
	<body>
	<div class="content">
        <div id="static_big_box">
        <div id="runing_box">
            <a href="" target="_blank">没有字怎么可以滚动？1</a>
			<a href="" target="_blank">没有字怎么可以滚动？2</a>
			<a href="" target="_blank">没有字怎么可以滚动？3</a>
			<a href="" target="_blank">没有字怎么可以滚动？4</a>
			<a href="" target="_blank">没有字怎么可以滚动？5</a>
			<a href="" target="_blank">没有字怎么可以滚动？6</a>
			<a href="" target="_blank">没有字怎么可以滚动？7</a>
			<a href="" target="_blank">没有字怎么可以滚动？8</a>
			<a href="" target="_blank">没有字怎么可以滚动？9</a>
			<a href="" target="_blank">没有字怎么可以滚动？10</a>
			<a href="" target="_blank">没有字怎么可以滚动？11</a>
			<a href="" target="_blank">没有字怎么可以滚动？12</a>
			<a href="" target="_blank">没有字怎么可以滚动？13</a>
			<a href="" target="_blank">没有字怎么可以滚动？14</a>
			<a href="" target="_blank">没有字怎么可以滚动？15</a>
			<a href="" target="_blank">没有字怎么可以滚动？16</a>
			<a href="" target="_blank">没有字怎么可以滚动？17</a>
			<a href="" target="_blank">没有字怎么可以滚动？18</a>
			<a href="" target="_blank">没有字怎么可以滚动？19</a>
			<a href="" target="_blank">没有字怎么可以滚动？20</a>
			<a href="" target="_blank">没有字怎么可以滚动？21</a>
			<a href="" target="_blank">没有字怎么可以滚动？22</a>
			<a href="" target="_blank">没有字怎么可以滚动？23</a>
			<a href="" target="_blank">没有字怎么可以滚动？24</a>
			<a href="" target="_blank">没有字怎么可以滚动？25</a>
			<a href="" target="_blank">没有字怎么可以滚动？26</a>
			<a href="" target="_blank">没有字怎么可以滚动？27</a>
			<a href="" target="_blank">没有字怎么可以滚动？28</a>
			<a href="" target="_blank">没有字怎么可以滚动？29</a>
			<a href="" target="_blank">没有字怎么可以滚动？30</a>
			<a href="" target="_blank">没有字怎么可以滚动？31</a>
			<a href="" target="_blank">没有字怎么可以滚动？32</a>
			<a href="" target="_blank">没有字怎么可以滚动？33</a>
			<a href="" target="_blank">有字才可以滚动34</a>	
				<a href="" target="_blank">有字才可以滚动35</a>	
					<a href="" target="_blank">有字才可以滚动36</a>	
						<a href="" target="_blank">有字才可以滚动37</a>	
							<a href="" target="_blank">有字才可以滚动38</a>	
								<a href="" target="_blank">有字才可以滚动39</a>	
									<a href="" target="_blank">有字才可以滚动40</a>	
										<a href="" target="_blank">有字才可以滚动41</a>	
											<a href="" target="_blank">有字才可以滚动42</a>	
												<a href="" target="_blank">有字才可以滚动43</a>	
													<a href="" target="_blank">有字才可以滚动44</a>	
														<a href="" target="_blank">有字才可以滚动45</a>	
															<a href="" target="_blank">有字才可以滚动46</a>	
        </div>
        </div>
    </div>
    <script type="text/javascript">
			var seconds = 100;//单位秒
			var box_obj = document.getElementById('runing_box')
            var distance = box_obj.width||box_obj.clientWidth || box_obj.offsetWidth||box_obj.scrollWidth;
			console.log(distance);
            var i =0;
            function start(){
                i--;
                if(i<=-distance){
                    i=2*distance;
                    document.getElementById('runing_box').style.right =-distance+'px';
                }else{
					var now_left = i>=distance?i-distance:i;
                    document.getElementById('runing_box').style.left =now_left+'px';
                }
                setTimeout(start,10);
            }
            onload=function(){setTimeout(start,seconds)};
    </script>
	</body>
</html>