html文本向上滚动代码,js实现单行文本向上滚动效果实例代码

/***************滚动场次开始*****************/

function ScrollText(content, btnPrevious, btnNext, autoStart) {

this.Delay = 10;

this.LineHeight = 20;

this.Amount = 1;

this.Direction = "up";

this.Timeout = 1500;

this.ScrollContent = this.$(content);

this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;

//this.ScrollContent.scrollTop = 0;

if (btnNext) {

this.NextButton = this.$(btnNext);

this.NextButton.onclick = this.GetFunction(this, "Next");

this.NextButton.onmouseover = this.GetFunction(this, "Stop");

this.NextButton.onmouseout = this.GetFunction(this, "Start");

}

if (btnPrevious) {

this.PreviousButton = this.$(btnPrevious);

this.PreviousButton.onclick = this.GetFunction(this, "Previous");

this.PreviousButton.onmouseover = this.GetFunction(this, "Stop");

this.PreviousButton.onmouseout = this.GetFunction(this, "Start");

}

this.ScrollContent.onmouseover = this.GetFunction(this, "Stop");

this.ScrollContent.onmouseout = this.GetFunction(this, "Start");

if (autoStart) {

this.Start();

}

}

ScrollText.prototype.$ = function (element) {

return document.getElementById(element);

}

ScrollText.prototype.Previous = function () {

clearTimeout(this.AutoScrollTimer);

clearTimeout(this.ScrollTimer);

this.Scroll("up");

}

ScrollText.prototype.Next = function () {

clearTimeout(this.AutoScrollTimer);

clearTimeout(this.ScrollTimer);

this.Scroll("down");

}

ScrollText.prototype.Start = function () {

clearTimeout(this.AutoScrollTimer);

this.AutoScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Timeout);

}

ScrollText.prototype.Stop = function () {

clearTimeout(this.ScrollTimer);

clearTimeout(this.AutoScrollTimer);

}

ScrollText.prototype.AutoScroll = function () {

if (this.Direction == "up") {

if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {

this.ScrollContent.scrollTop = 0;

}

this.ScrollContent.scrollTop += this.Amount;

} else {

if (parseInt(this.ScrollContent.scrollTop) <= 0) {

this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;

}

this.ScrollContent.scrollTop -= this.Amount;

}

if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) {

this.ScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Delay);

} else {

this.AutoScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Timeout);

}

}

ScrollText.prototype.Scroll = function (direction) {

if (direction == "up") {

if (this.ScrollContent.scrollTop == 0) {

this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;

}

this.ScrollContent.scrollTop -= this.Amount;

} else {

this.ScrollContent.scrollTop += this.Amount;

}

if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {

this.ScrollContent.scrollTop = 0;

}

if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) {

this.ScrollTimer = setTimeout(this.GetFunction(this, "Scroll", direction), this.Delay);

}

}

ScrollText.prototype.GetFunction = function (variable, method, param) {

return function () {

variable[method](param);

}

}

if (document.getElementById("ul_round")) {

var scrollup = new ScrollText("ul_round");

scrollup.LineHeight = 40;        //单排文字滚动的高度

scrollup.Amount = 1;            //注意:子模块(LineHeight)一定要能整除Amount.

scrollup.Delay = 30;           //延时

scrollup.Start();             //文字自动滚动

scrollup.Direction = "up";   //默认设置为文字向上滚动

}

/***************滚动场次结束*****************/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值