javascript走马灯的效果(文档标题文字滚动)

Posted 太阳花0525

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript走马灯的效果(文档标题文字滚动)相关的知识，希望对你有一定的参考价值。

做一些网站的时候，文档标题会滚动，这个效果是走马灯的效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>走马灯的效果</title>
	</head>
	<body>
		<script>
			var dir="";
			function zouma(){
				var tit=document.title;
				if(dir=="left"){
					var first=tit.substring(0,1);
					//console.log(first);
					var last=tit.substring(1,tit.length);
					document.title=last+first;
				}else if(dir=="right"){
					var first=tit.substring(0,tit.length-1);
					console.log(first);
					var last=tit.substring(tit.length-1);
					document.title=last+first;
				}
			}
			function strdir(d){
				dir=d;
			}
			setInterval("zouma()",600);
		</script>
		<button id="left" type="button" onclick="strdir(‘left‘)">向右滑动</button>
		<button id="right" type="button" onclick="strdir(‘right‘)">向左滑动</button>
	</body>
</html>

　　这个分为向左滚动和向右滚动，默认不滚动

以上是关于javascript走马灯的效果(文档标题文字滚动)的主要内容，如果未能解决你的问题，请参考以下文章

Android 文字自动滚动（跑马灯）效果的两种实现方法[特别好使]

JQuery实现文字无缝滚动效果 Marquee插件

vue文字跑马灯效果

vue中实现文字滚动-跑马灯效果-marquee原生标签

请问跑马灯效果如何实现两行文字轮流从右向左跑？ 一行跑完了，另一行再开始跑，这样循环

几幅图片的走马灯效果怎么做？