源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-01-18 12:15 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js实现单行文本向上滚动效果实例代码
[u]复制代码[/u] 代码如下:
/***************滚动场次开始*****************/ 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";   //默认设置为文字向上滚动 } /***************滚动场次结束*****************/
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部