JS无间隔文字滚动代码(三种效果)

转载 2012年03月23日 00:47:05
/**
 * JS无间隔文字滚动代码(三种效果)
 * http://www.cnblogs.com/missthe/archive/2008/09/26/1299533.html
 *  marquee
	var marquee = new ScrollText("listmarquee");
	marquee.LineHeight = 60;
	marquee.Amount = 1;
	marquee.Timeout = 30;
	marquee.Delay = 30;
	marquee.Start();
 *  向上滚动
	var scrollup = new ScrollText("listcontent");
	scrollup.LineHeight = 60;
	scrollup.Amount = 4;
	scrollup.Start();
 *  向下滚动
	var scrolldown = new ScrollText("listcontent");
	scrolldown.LineHeight = 60;
	scrolldown.Amount = 4;
	scrolldown.Direction = "down";
	scrolldown.Start();	
 */
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);
    }
}

相关文章推荐

JS实现文字滚动效果

分别实现无缝滚动和间歇滚动 间歇滚动有问题_(:зゝ∠)_,第一个ul的正常滚动,到第二个的时候就开始无缝滚动,目前没找到问题在哪里,找到会进行修改 效果图 代码: html> h...

js实现首尾相连的文字滚动效果

最近单位的小同事问了一个问题,就是在页面底部的位置实现字体滚动的效果。若利用进行滚动的话,必须等上一次滚动出屏幕才可以看到下一次进入的文字,这样的效果很不好,滚动区域时常会出现大片空白,用户体验不好。...

js实现文字定时上下滚动效果

兼容多种浏览器的文字定时上下滚动效果 .cls_container { border: 1px solid #ccc; width: 380px; font-size: 12px; ...

JavaScript js csdn 文字滚动广告效果

转载自: http://blog.csdn.net/ibm_hoojo/article/details/5790372     一、csdn博客中的招聘广告效果:   二、以下是代码实现 ...

文字无缝滚动效果代码

  • 2015年02月04日 17:44
  • 41KB
  • 下载

文字滚动JS代码

文字滚动特效,还是比较简单的只要弄明白远离,主要是定时器的使用,今天在慕课上看到一个比较好的,滚动好写只要实现scrollTop++就可以,难点在于怎么样实现无限滚动,要理解两个属性就是scrollT...

纯JS无间隙文字向上滚动代码

体验盒子 - UEDBOX.COM 快报讯(记者 金辰 薛晟) 儿子溺水命悬一线,他以为那是别人家的孩子,选择了冷漠离开,结果得知溺水的居然是自己儿子时,悔恨已晚。事后,这位父亲竟然...

从网上找到的一段定时向上滚动文字的JS代码 和大家分享

从网上找到的一段定时向上滚动文字的JS代码 和大家分享首先要感谢这段JS代码的作者,给我带来很大的方便代码如下:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS无间隔文字滚动代码(三种效果)
举报原因:
原因补充:

(最多只允许输入30个字)