欢迎光临
我的个人博客网站

原生js实现文本滚动

<!DOCTYPE html> <html lang="zh-CN"> 	<head> 		<meta charset="utf-8"> 		<title>文本滚动</title> 	</head> 	<body> 		<div id="anews" class="anews"> 			<img src="喇叭.png"><!--普通图片,不影响最终显示--> 			<span class="anews_txt" id="anews_txt"></span> 		</div> 	<script> 		window.onload=function(){ 			var anews_txt = document.getElementById("anews_txt") 			var txt = "观自在菩萨,行深般若波罗蜜多时,照见五蕴皆空,度一切苦厄,舍利子,色不异空,空不异色,色即是空,空即是色,受想行识,亦复如是,舍利子,是诸法空相,不生不灭,不垢不净,不增不减,是故空中无色,无受想行识,无眼耳鼻舌身意,无色声香味触法,无眼界,乃至无意识界,无无明,亦无无明尽,乃至无老死,亦无老死尽,无苦集灭道,无智亦无得,以无所得故,菩提萨埵,依般若波罗蜜多故,心无罣碍,无罣碍,故无有恐怖,远离颠倒梦想,究竟涅盘,三世诸佛,依般若波罗蜜多故,得阿耨多罗三藐三菩提,故知般若波罗蜜多,是大神咒,是大明咒,是无上咒,是无等等咒,能除一切苦,真实不虚,故说般若波罗蜜多咒,即说咒曰,揭谛揭谛,波罗揭谛,波罗僧揭谛,菩提萨婆诃。" 
		const sleep = (delay) =&gt; new Promise((resolve) =&gt; setTimeout(resolve, delay))  		const printf = async (i,len,t) =&gt; { 			//i为设置的文本/len为标签一行最多显示的字数/t为刷新时间,即下一个字出来的时间 			anews_txt.style.setProperty('width', len+'em');//设置文本最大显示字符 			anews_txt.style.setProperty('text-align', 'right');//实现一开始的文本从有往左 			for(var q = 1, p = 0; q &lt;= i.length+len; ){ 				await sleep(t) 				//如下是设置的文本长度大于单行最大显示的情况,即i+1 &gt;= len 				//若i+1 &lt; len文字则无法消失 				anews_txt.innerHTML = i.substr(p,q) 				if(q &gt;= len){ 					p++当前显示已达到目标,单行最大显示字数//起始字符向后退 					anews_txt.style.setProperty('text-align', 'left'); 				} 				if(q &lt;= i.length){ 					q++ 				} 			} 		} 		 		//第一个参数为String类型 		//第二个参数为int类型的正整数 		//第三个参数为int类型的正整数 		//第三个参数越大文本移动速度越快 		printf(txt,10,60) 	} &lt;/script&gt; &lt;/body&gt; &lt;style&gt; *{ 	margin: 0; 	padding: 0; 	z-index: 0; } .anews{ 	display: flex; } .anews_txt{ 	height: 1.5em; 	overflow: hidden; } &lt;/style&gt; 

</html>

  原生js实现文本滚动

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 原生js实现文本滚动
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏