前端學習----實現跑馬燈的三種方式

參考博客: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;width: 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;
	width: 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;
		width: 230px;
		height: 20px;
		background: grey;
		color:white;
		overflow: hidden;
	}
	#cont{
		width: 200%;
		height: 20px;
		position:absolute;
		left: 0;
		top: 0;
		animation:5s move infinite linear;
	}
	#cont .text{
		display: inline-block;
		float: left;
		width: 50%;
		height: 20px;
	}
	@keyframes move{
		0%{
		    left: 0;
		  }
		100%{
		    left: -100%;
		    }
	}

利用animation實現無縫滾動 當然實際上是利用了2條相同的數據