技術標籤：Js js html

原生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) => new Promise((resolve) => setTimeout(resolve, delay)) 
			const printf = async (i,len,t) => {
				//i設定的文字/len標籤一行最多顯示字數/t重新整理時間'下一個字出來的時間'
				anews_txt.style.setProperty('width', len+'em');
				anews_txt.style.setProperty('text-align', 'right');
				if(i.length + 
 1 < len){
					len = i.length + 1
				}
				//如下是設定的文字長度大於單行最大顯示的情況，即i.length + 1 >= len
				for(var q = 1, p = 0; q <= i.length+len; ){
					await sleep(t)
					anews_txt.innerHTML = i.substr(p,q)
					if(q >= len){
						p++當前顯示已達到目標，單行最大顯示字數//起始字元向後退
						anews_txt.style.setProperty('text-align', 'left');
					}
					if(q <= i.length){
						q++
					}
				}
			}
			
			//第一個引數為String型別
        	//第二個引數為int型別的正整數
        	//第三個引數為int型別的正整數
        	//第三個引數越大文字移動速度越快
			printf(txt,10,60) 
		}
	</script>
	</body>
	<style>
	*{
		margin: 0;
		padding: 0;
		z-index: 0;
	}
	.anews{
		display: flex;
	}
	.anews_txt{
		height: 1.5em;
		overflow: hidden;
	}
	</style>
</html>

原生JS實現文字滾動效果

原生JS實現文字滾動效果

原生JS實現文字滾動效果

原生js實現瀑布流效果

原生js實現分頁效果

原生js實現照片牆效果

原生JS實現彈幕效果的簡單操作指南

原生js實現彈幕效果

原生JS實現拖拽效果

原生js實現星星閃爍效果

js實現樓層滾動效果

原生JS實現目錄滾動特效

原生JS實現滑動按鈕效果

原生js實現滾動進度條效果

原生js實現日曆效果

原生JS實現螢火蟲效果

原生JS實現煙花效果

HTML+JS實現“程式碼雨”效果原始碼（黑客帝國文字下落效果）

使用原生JS實現滾輪翻頁效果的示例程式碼

Android實現文字滾動播放效果的程式碼

js實現盒子滾動動畫效果

原生js實現拖拽移動與縮放效果

原生JS實現文字滾動效果

原生JS實現文字滾動效果

相關推薦