文字滚动效果

怎样做一个几排文字上下滚动，但是是首尾相接的效果。
因为用MARQUEE 标签做出来的，原始内容滚动完毕会有很大一片空白。

解决方案 »

  1.   

    这又一个无缝隙连续滚动代码效果：http://www.abaonet.com/jsCode/page/200910/2161.html这里还有一个通用不间断滚动JS封装类，里面可以下载，挺全面的，有图片有文字，各种样式的滚动都有：
    http://www.abaonet.com/demo/codeR/d1816/MSClass.html
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    </head>
    <body>
    <script type="text/javascript">
    var $ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    }Object.extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    }function addEventHandler(oTarget, sEventType, fnHandler) {
        if (oTarget.addEventListener) {
            oTarget.addEventListener(sEventType, fnHandler, false);
        } else if (oTarget.attachEvent) {
            oTarget.attachEvent("on" + sEventType, fnHandler);
        } else {
            oTarget["on" + sEventType] = fnHandler;
        }
    };
    var Scroller = Class.create();
    Scroller.prototype = {
      initialize: function(idScroller, idScrollMid, options) {
        var oScroll = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);
        
        this.heightScroller = oScroller.offsetHeight;
        this.heightList = oScrollMid.offsetHeight;
        
        if(this.heightList <= this.heightScroller) return;
        
        oScroller.style.overflow = "hidden";
        oScrollMid.parentNode.appendChild(oScrollMid.cloneNode(true));
        
        this.oScroller = oScroller;    
        this.timer = null;
        
        this.SetOptions(options);
        
        this.side = 1;//1是上 -1是下
        switch (this.options.Side) {
            case "down" :
                this.side = -1;
                break;
            case "up" :
            default :
                this.side = 1;
        }
        
        addEventHandler(oScroller , "mouseover", function() { oScroll.Stop(); });
        addEventHandler(oScroller , "mouseout", function() { oScroll.Start(); });
        
        if(this.options.PauseStep <= 0 || this.options.PauseHeight <= 0) 
    this.options.PauseStep = this.options.PauseHeight = 0;
        this.Pause = 0;
        
        this.Start();
      },
      //设置默认属性
      SetOptions: function(options) {
        this.options = {//默认值
          Step:            1,//每次变化的px量
          Time:            20,//速度(越大越慢)
          Side:            "up",//滚动方向:"up"是上，"down"是下
          PauseHeight:    0,//隔多高停一次
          PauseStep:    1000//停顿时间(PauseHeight大于0该参数才有效)
        };
        Object.extend(this.options, options || {});
      },
      //滚动
      Scroll: function() {
        var iScroll = this.oScroller.scrollTop, iHeight = this.heightList, time = this.options.Time, oScroll = this, iStep = this.options.Step * this.side;
        
        if(this.side > 0){
            if(iScroll >= (iHeight * 2 - this.heightScroller)){ iScroll -= iHeight; }
        } else {
            if(iScroll <= 0){ iScroll += iHeight; }
        }
        
        if(this.options.PauseHeight > 0){
            if(this.Pause >= this.options.PauseHeight){
                time = this.options.PauseStep;
                this.Pause = 0;
            } else {
                this.Pause += Math.abs(iStep);
                this.oScroller.scrollTop = iScroll + iStep;
            }
        } else { this.oScroller.scrollTop = iScroll + iStep; }
        
        this.timer = window.setTimeout(function(){ oScroll.Scroll(); }, time);
      },
      //开始
      Start: function() {
        this.Scroll();
      },
      //停止
      Stop: function() {
        clearTimeout(this.timer);
      }
    };window.onload = function(){
        new Scroller("idScroller", "idScrollMid",{ PauseHeight:25 });
    }
    </script>
    <style>
    #idScroller *{margin:0px; padding:0px;}
    #idScroller{line-height:25px;width:500px; height:50px; overflow:hidden; border:1px solid #000000;}
    #idScroller ul{width:100%}
    #idScroller li{width:50%;  float:left; overflow:hidden; list-style:none;}
    </style>
    <div id="idScroller">
      <div id="idScrollMid">
        <ul>
          <li>111111111111111111111</li>
          <li>211111111111111111111</li>
          <li>311111111111111111111</li>
          <li>411111111111111111111</li>
          <li>511111111111111111111</li>
          <li>611111111111111111111</li>
        </ul>
        
      </div>
    </div>
    </body>
    </html>
      

  3.   

    3楼的你好，能解释下
    var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    }
    里面的this吗？我对这个还是理解不好，谢谢了！
      

  4.   


    这个this也就是指的函数本身：
    function() {
          this.initialize.apply(this, arguments);
        }