自己用javascrpt写的像淘宝首页的间隔性滚动的效果

昨天收到一个小功能的需求实现像淘宝首页的间隔性滚动的效果,结果碰到一个小小的问题,想起看过一篇李战老师的悟透javascript,于是在园子里搜到李老师的文章,重新拜读了一遍,但由于本人天资愚昧,还是未能悟出个究竟,不得已,向李老师求救,终于,在李老师的指点下,解决了这个小问题,在这里再次感谢李战老师。
想来想去,先让大家看看效果,再看看有没有看下去的必要吧。

用法很简单:
var scroll = new ScrollText("content","pre","next",true);
第一个参数是滚动区的id,第二个是显示上一条的按钮的id,第三个是显示下一条的按钮的id,第四个是是否直接开始滚动,为false的话后面再scroll.Start()就OK了。
废话不说了,贴代码吧。
我第一次发贴,不懂排版,直接贴了。
ScrollText.js

function ScrollText(content,btnPrevious,btnNext,autoStart)
{
    this.Speed = 10;
    this.Timeout = 1500;
    this.LineHeight = 20;
    this.NextButton = this.$(btnNext);
    this.PreviousButton = this.$(btnPrevious);
    this.ScrollContent = this.$(content);
    this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;
    this.NextButton.onclick = this.GetFunction(this,"Next");
    this.PreviousButton.onclick = this.GetFunction(this,"Previous");
   
    this.NextButton.onmouseover = this.GetFunction(this,"Stop");
    this.NextButton.onmouseout = this.GetFunction(this,"Start");
   
    this.ScrollContent.onmouseover = this.GetFunction(this,"Stop");
    this.ScrollContent.onmouseout = this.GetFunction(this,"Start");
   
    this.PreviousButton.onmouseover = this.GetFunction(this,"Stop");
    this.PreviousButton.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()
{
    this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
}

ScrollText.prototype.Stop = function()
{
    clearTimeout(this.AutoScrollTimer);
}

ScrollText.prototype.AutoScroll = function()
{
    this.ScrollContent.scrollTop++;
    if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
    {
        this.ScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Speed);
    }
    else
    {
        if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
        {
            this.ScrollContent.scrollTop = 0;
        }
        this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
    }
}

ScrollText.prototype.Scroll = function(direction)
{
    if(direction=="up")
    {
        this.ScrollContent.scrollTop--;
    }
    else
    {
        this.ScrollContent.scrollTop++;
    }
    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.Speed);
    }
}

ScrollText.prototype.GetFunction = function(variable,method,param)
{
    return function()
    {
        variable[method](param);
    }
}

Demo.Htm

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript" src="ScrollText.js"></script>
</head>
<body>
<div id="pre" style="20px;height:20px;float:left;text-align:center;background-color:#EEEEEE;border:solid 1px #888888;">↑</div>
<div id="content" style="height:20px;line-height:20px;overflow:hidden;float:left;120px;border:solid 1px #0000FF;">
hello1........<br>
hello2........<br>
hello3........<br>
hello4........<br>
hello5........<br>
hello6........<br>
hello7........<br>
hello8........<br>
</div>
<div id="next" style="20px;height:20px;float:left;text-align:center;background-color:#EEEEEE;border:solid 1px #888888;">↓</div>
<script language="javascript" type="text/javascript">
var scroll = new ScrollText("content","pre","next",true);
</script>
</body>
</html>



功能比较简单,用得着的就拿去吧。 新增加Demo源码下载
原文地址:https://www.cnblogs.com/robot/p/1142052.html