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

最新推荐文章于 2023-08-02 16:13:32 发布

熟悉的新风景

最新推荐文章于 2023-08-02 16:13:32 发布

阅读量3.6k

点赞数 2

分类专栏： # JavaScript小案例

本文链接：https://blog.csdn.net/weixin_44797182/article/details/101027026

版权

JavaScript小案例专栏收录该内容

28 篇文章 1 订阅

订阅专栏

文字逐行显示效果

<!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>

熟悉的新风景

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
动画效果之文字显示效果（逐行显示和滚动显示）

文字逐行显示效果<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>使用原生js实现文字逐行显示&lt...
复制链接

扫一扫