前端学习----实现跑马灯的三种方式

参考博客:https://segmentfault.com/a/1190000016903385?utm_source=tag-newest
文中提出了三种实现跑马灯的方式,分别是1.利用js实现2.利用html标签实现3.利用css实现 文中也给出了3种方法优劣的比较,这里不再赘述

1.利用js实现跑马灯

    <div id="move">三玖是我老婆,春日野穹是我妹妹</div>
    #move{position: absolute; 230px;background: grey;color:white;}

    window.onload=function(){
			var move=document.getElementById('move');
			move.style.right='-230px';
			moveRight();
		}
		function moveRight(){
			if(parseInt(move.style.right)>screen.width)	{
				move.style.right='0';
			}
			move.style.right=parseInt(move.style.right)+3+'px';
			setTimeout(moveRight,10);
		}

这个就是利用js操控dom元素的属性 利用setTimeout调用自己 不断改变right的大小进行移动

2.利用html 实现

这个是利用marquee标签实现 

3.利用css 实现

//html 	
<div id="move">
	<div id="cont">三玖是我老婆,春日野穹是我妹妹</div>
</div>
// css
#move{
	position: relative;
	 230px;
	height: 40px;
	background: grey;
	color:white;
     }
#cont{

	position:absolute;
	left: 0;
	right: 0;
	transition: left 10s linear;
     }
//js
window.onload=function(){
	var cont=document.getElementById('cont');
	cont.style.left="-230px";
}

利用transition实现跑马灯效果
css实现无缝滚动

//html
<div id="move">
	<div id="cont">
		<div class="text">1三玖是我老婆,春日野穹是我妹妹</div>
		<div class="text">2三玖是我老婆,春日野穹是我妹妹</div>
	</div>
</div>
//css
	*{
		padding: 0;
		margin:0;
	}
	#move{
		position: relative;
		 230px;
		height: 20px;
		background: grey;
		color:white;
		overflow: hidden;
	}
	#cont{
		 200%;
		height: 20px;
		position:absolute;
		left: 0;
		top: 0;
		animation:5s move infinite linear;
	}
	#cont .text{
		display: inline-block;
		float: left;
		 50%;
		height: 20px;
	}
	@keyframes move{
		0%{
		    left: 0;
		  }
		100%{
		    left: -100%;
		    }
	}

利用animation实现无缝滚动 当然实际上是利用了2条相同的数据