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无间隔滚动代码(三种效果)

http://www.365css.cn/example/wenziguendong/
  • oldtown
  • oldtown
  • 2009年12月13日 20:39
  • 204

JS实现文字滚动效果

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

文字滚动无间隙代码

csdn 博客 招聘滚动信息广告特效
  • bornjasoncen
  • bornjasoncen
  • 2010年08月07日 22:26
  • 767

JS 有时间间隔的文字滚动

*{margin:0;padding:0;} ul,li{list-style-type:none;} body{font:12px/180% Arial, Helvetica, sans-ser...
  • oXiaoRenWu001
  • oXiaoRenWu001
  • 2013年02月26日 11:06
  • 552

js 上下文字滚动效果

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit...
  • qq_15602525
  • qq_15602525
  • 2016年10月25日 10:36
  • 108

HTML5实现文字滚动

  • xzytl60937234
  • xzytl60937234
  • 2017年07月07日 17:25
  • 934

单行文字间歇向上滚动,放上光标就停,移开继续滚动。

单行文字间歇向上滚动,放光标就停,移开继续滚动 .scrollDiv { height: 25px;/* 必要元素 */ line-height: 25px; border: #ccc ...
  • li_star
  • li_star
  • 2013年09月06日 13:41
  • 920

无间隔滚动代码

                                        Recommend Products                                          ...
  • Fjy_0raC1E
  • Fjy_0raC1E
  • 2009年02月13日 18:58
  • 514

JS实现文字的左右滚动

p{position: absolute;left: 125px; top: 100px;} var tag = 0;//标志,判断对象当前位置是在最左还是最右,注意这里必须设置为全局变...
  • u013173279
  • u013173279
  • 2015年07月29日 18:48
  • 4211

使用JS写一个文字滚动效果

文字滚动 *{ padding: 0px; margin: 0px; }       #box{       widows: 1000px;       height: 150px;...
  • Drug_
  • Drug_
  • 2017年06月16日 21:29
  • 781
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS无间隔文字滚动代码(三种效果)
举报原因:
原因补充:

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