文字横向滚动

2019独角兽企业重金招聘Python工程师标准>>>

HTML

<div id="scroll_div" class="fl">
			<div id="scroll_begin">
				<a href="#">1.东临碣石，以观沧海。水何澹澹，山岛竦峙。树木丛生，百草丰茂。秋风萧瑟，洪波涌起。日月之行，若出其中；星汉灿烂，若出其里。幸甚至哉，歌以咏志</a>
			</div>
			<div id="scroll_end"></div>
		</div>

CSS

/*文字横向滚动*/
#scroll_div {
	height:30px;overflow: hidden;white-space: nowrap;width:100%;background: #FFFFFF;
	padding: 0 0.3rem 0 0.7rem;
	color: #332C2B;
}
#scroll_div a{
	color: #332C2B;
	line-height: 30px;
}
#scroll_begin,#scroll_end {display: inline;}

JS

	//文字横向滚动
$(function() {
	function ScrollImgLeft() {
		var speed = 50;
		var MyMar = null;
		var scroll_begin = document.getElementById("scroll_begin");
		var scroll_end = document.getElementById("scroll_end");
		var scroll_div = document.getElementById("scroll_div");
		scroll_end.innerHTML = scroll_begin.innerHTML;

		function Marquee() {
			if(scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
				scroll_div.scrollLeft -= scroll_begin.offsetWidth;
			else
				scroll_div.scrollLeft++;
		}
		MyMar = setInterval(Marquee, speed);
		scroll_div.onmouseover = function() {　　　　　　　
			clearInterval(MyMar);　　　　　
		}　　　　
		scroll_div.onmouseout = function() {　　　　　　　
			MyMar = setInterval(Marquee, speed);　　　　　　　　　
		}
	}
	ScrollImgLeft();
})

 

转载于:https://my.oschina.net/Cubicluo/blog/760268