JavaScript—文字横向滚动

2,048 阅读1分钟

HTML

<div id="news">
    <div id="innews">
	<div id="new1">马主人回应下海救人两匹马去世</div>
	<div id="new2">擅自泄露考生作文答卷老师被调查</div>
    </div>
</div>

CSS

#news{
	width:3.75rem;
	height:0.32rem;
	margin:0 auto;
	overflow:hidden;
	padding:0.05rem;
	background: #fff;
	color:red;
	font-size:0.13rem;
	border-bottom: 0.01rem solid #ccc;
}
#innews{width:300%}
#new1{width:3rem; float:left}
#new2{width:3rem; float:left}

JS

function NewsLeft(){
    var speed=12;
    var MyMar = null;
    var news=document.getElementById("news")
    var new1=document.getElementById("new1")
    var new2=document.getElementById("new2")
    new2.innerHTML=new1.innerHTML;
    function marquee(){
	if(news.scrollLeft>=new1.offsetWidth){
		news.scrollLeft=0;
	}else{
		news.scrollLeft++;
	 }
    }
    setInterval(marquee,speed)
    new1.onmouseover = function(){
    clearInterval(MyMar);
  }
    new2.onmouseout = function(){
    MyMar = setInterval(Marquee,speed);     
    }  
    }
    NewsLeft();