阅读背景:

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);
	}
}function TextAutoScroll() {



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: