动画效果之文字显示效果（逐行显示和滚动显示）

谁借莪１个温暖的怀抱￠ 2024-04-19 15:41 72阅读 0赞

### 文字逐行显示效果 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>使用原生js实现文字逐行显示</title>
    		<style type="text/css">
    			* { 
    				margin: 0;
    				padding: 0;
    			}
    
    			div { 
    				position: relative;
    				margin: 40px;
    				width: 300px;
    				height: 40px;
    				border: 2px solid red;
    				/* overflow: hidden; */
    			}
    
    			ol { 
    				position: absolute;
    			}
    
    			li { 
    
    				font-size: 20px;
    				height: 40px;
    				list-style: none;
    				line-height: 40px;
    
    			}
    
    			li:nth-child(2n) { 
    				background: pink;
    			}
    			li.demo{ 
    				color: blue;
    				font-size: 30px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="box">
    			<ol>
    				<li class="demo">1111111111111111</li>
    				<li>22222222222222</li>
    				<li>333333333333333</li>
    				<li>444444444444444</li>
    				<li>555555555555555</li>
    				<li>666666666666666</li>
    			</ol>
    		</div>
    	<script type="text/javascript">
    			var box = document.getElementById("box");
    			var ol=document.getElementsByTagName("ol")[0]
    			var li=document.getElementsByTagName("li");
    			var speed=0;
    			var order=true
    			var timer =playTimer= null;
    			var index=0;
    			
    			//每两秒向上移动一次
    			timer=setInterval(startMove,2000);
    			function startMove(){ 
    				indexChange();
    	
    			}
    			function indexChange(){ 
    				order?index++:index--;
    				if(index<=0){ 
    					index=0;
    					order=true;
    				}
    				if(index>=li.length-1){ 
    					index=li.length-1;
    					order=false
    				}
    				init()
    			}
    			function init(){ 
    				for(var i=0;i<li.length;i++){ 
    					li[i].className="";
    					li[index].className="demo";
    					textMove(-index*li[index].offsetHeight);
    					
    				}
    			}
    			function textMove(target){ 
    				clearInterval(playTimer)
    				playTimer=setInterval(function(){ 
    					speed = (target-ol.offsetTop)/10;
    					speed =speed>0?Math.ceil(speed):Math.floor(speed)
    					if(target==ol.offsetHeight){ 
    						clearInterval(playTimer)
    					}else{ 
    						
    					ol.style.top = ol.offsetTop + speed + "px";
    					}
    				},30)
    				
    			}
    		</script> 
    		
    	</body>
    </html>

### 文字滚动显示效果 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>滚动显示效果</title>
    		<style type="text/css">
    			div{ 
    				border: 1px solid red;
    				width: 90%;
    			}
    			p{ 
    				white-space: pre;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			<p>1    23  4 56</p>
    		</div>
    		<script type="text/javascript">
    			var p=document.getElementsByTagName("p")[0];	
    			var newStr=null;
    			var timer=null;
    			var str;
    			timer=setInterval(function(){ 
    				str=p.innerHTML;
    				newStr = str.substr(1)+str.substr(0,1);
    				p.innerHTML= newStr
    				console.log(str)
    			},1000)
    			
    		</script>
    	
    	</body>
    </html>