JavaScript 自定义自动滚动文字，两种方式

TextAutoScroll.js

function TextAutoScroll() {
	var _this = this;
	this.ScrollTypeEnum = {
		LeftRight: 0,//左右滚动
		Left: 1,//像左滚动
	};
	this.space = 4;//文本添加的空格数
	var spaceStr = "";
	this.speed = 20;//速度
	this.ScrollEndStopTime = 800;//滚动到尽头停止的时间
	
	this.startScroll = function(element, scrollTypeEnum) {
		for(var i=0; i<_this.space;i++) {
			spaceStr += " ";
		}
		element.style.whiteSpace = "nowrap"; //文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
		element.style.overflow = "hidden"; //内容会被修剪，并且其余内容是不可见的。
		if(scrollTypeEnum == _this.ScrollTypeEnum.LeftRight) {
			LeftRight(element);
		} else {
			Left(element);
		}
	}

	function LeftRight(element) {
		var isRight = false;
		element.innerHTML = spaceStr + element.innerHTML + spaceStr;
		if(element.scrollWidth > element.clientWidth) {
			LeftRightTime(element, isRight);
		}
	}

	function LeftRightTime(element, isRight) {
		var interval = setInterval(function() {
			if(!isRight) {
				element.scrollLeft = element.scrollLeft + 1;
				if(element.scrollLeft >= element.scrollWidth - element.clientWidth) {
					isRight = true;
					clearInterval(interval);
					setTimeout(function() {
						LeftRightTime(element, isRight);
					}, _this.ScrollEndStopTime);
				}
			} else {
				element.scrollLeft = element.scrollLeft - 1;
				if(element.scrollLeft == 0) {
					isRight = false;
					clearInterval(interval);
					setTimeout(function() {
						LeftRightTime(element, isRight);
					},  _this.ScrollEndStopTime);
				}
			}
		}, _this.speed);
	}

	function Left(element) {
		var oldScrollWidth = element.scrollWidth;
		element.innerHTML = element.innerHTML + spaceStr + element.innerHTML;
		if(element.scrollWidth > element.clientWidth) {
			LeftTime(element, oldScrollWidth);
		}
	}

	function LeftTime(element, oldScrollWidth) {
		var interval = setInterval(function() {
			element.scrollLeft = element.scrollLeft + 1;
			if(element.scrollLeft >= oldScrollWidth) {
				clearInterval(interval);
				element.scrollLeft = 0;
				setTimeout(function() {
					LeftTime(element, oldScrollWidth);
				},  _this.ScrollEndStopTime);
			}
		},  _this.speed);
	}
}

使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8">
	</head>

	<body>
		<div id="text" style="width:180px;height:auto;">JavaScript  自定义自动滚动文字，两种方式</div>

		<script src="libs/TextAutoScroll.js"></script>

		<script type="text/javascript">
			var text = document.getElementById("text");
			var textAutoScroll = new TextAutoScroll();
			textAutoScroll.startScroll(text, textAutoScroll.ScrollTypeEnum.LeftRight);
		</script>
	</body>

</html>

JavaScript 自定义自动滚动文字，两种方式

猜你喜欢