js 实现滚动显示

在web系统中，首页如果信息太多，则需要将信息滚动显示。网上实现的方式很多，如果不太懂javaScript的朋友，可以看得一头雾水，我也是在网上扒的。感觉效果不错，再关键的是：在改造的时候，不会影响我的代码，也就是耦合性比较低（这也是咱们写代码的目标吧，呵呵）。也许你看过，也用过，不过我还是整理了下，为的是，你急需的时候，不用花太多时候去研究和改造自己的代码就能实现效果。写的不好的，大家帮忙改一下吧。

 

1、假设下面代码就是你需要滚动的代码，注意：使用<li>标签，别的比如table好像不行

      <div id="examineList" style="overflow:hidden;">

         <li></li>

         <li></li>

         <li></li>

     </div>

2、javascript代码：

 

   <script type="text/javascript"> 

    

   

    //下面是配置滚动的一些参数

    var marquee2 = new ScrollText("examineList");
    marquee2.LineHeight = 30;
    marquee2.Amount = 1;
    marquee2.Timeout = 30;
    marquee2.Delay = 30;
    marquee2.Start();

 

    </script>

3、真正实现滚动的js代码在下面的这个文件里，所以在你需要滚动的页面中引入这些文件：

     <script src="<%=request.getContextPath()%>/js/jquery/jquery.js"></script>

     <script src="<%=request.getContextPath()%>/js/ScrollText.js"></script>

     因为ScrollText.js有用到jquery，所以你也得引入一下

4、做完上面动作，就可以滚动啦。下面提供你需要的文件。

5、若不能下载：只能这样啦，这就是ScrollText.js的全部内容，你自己怎么处理，自己看着办落。至于jquery.js，则到官网去下落。

function ScrollText(content,btnPrevious,btnNext,autoStart){ this.Delay = 10; this.LineHeight = 20;this.Amount = 1;//注意:LineHeight一定要能整除Amount.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); }}