JavaScript实现文字跑马灯

其实实现文字的跑马灯和实现图片轮播的原理是一样的。

下面是我自己实现的，文字的位置可以随便更改，效果不会变，文字的内容可以通过ajax获取，同时，可以直接用Jquery改写一下，很方便。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字跑马灯</title>
	<style>
		#race_notice_p{position:relative; margin-left:70%;width:300px; overflow:hidden; height:25px; background-color:gray; }
		#race_notice_s{position:absolute;left:0; top:0;color:red;}
		#race_notice_s p{ margin:0;}
	</style>
</head>
<body>
	<div id='race_notice_p' >
		<div id='race_notice_s'>
			<p>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
		</div>
	</div>
</body>
	<script>
		window.onload=function(){
			// 要显示的文字可以通过ajax获取之后，嵌入p标签
			function move(){
				var speed = -5;
				var race_notice_p = document.getElementById('race_notice_p');
				var race_notice_s = document.getElementById('race_notice_s');
				var p = race_notice_s.getElementsByTagName('p')[0];
				var length = p.offsetWidth;
				p.innerHTML +=p.innerHTML;
				function move_do(){
					if(race_notice_s.offsetLeft < - length){//重新开始
						race_notice_s.style.left=0;
					}
					race_notice_s.style.left = race_notice_s.offsetLeft + speed +'px';
				}
				setInterval(move_do,100);
			}
			move();
		}
	</script>
</html>

　　

posted @ 2018-03-21 10:41  寻觅beyond  阅读(3897)  评论(0)  编辑  收藏  举报
返回顶部