JavaScript实现文字跑马灯

最新推荐文章于 2023-04-24 11:22:28 发布

JOKER0707

最新推荐文章于 2023-04-24 11:22:28 发布

阅读量362

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/-beyond/p/8615601.html

版权

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

下面是我自己实现的，文字的位置可以随便更改，效果不会变，文字的内容可以通过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.οnlοad=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>

转载于:https://www.cnblogs.com/-beyond/p/8615601.html

JOKER0707

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现文字跑马灯

其实实现文字的跑马灯和实现图片轮播的原理是一样的。下面是我自己实现的，文字的位置可以随便更改，效果不会变，文字的内容可以通过ajax获取，同时，可以直接用Jquery改写一下，很方便。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...
复制链接

扫一扫