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>