求助

实现内容在25px高度的div内横向滚动，
实现效果马上结贴，速度
注：不能用table

解决方案 »

  1.   

    首先，你的里面的容器不能用DIV，只能用SPAN
      

  2.   

    Marquee.prototype.init=function()
    {
        var itemstring="";
    for(var i=0;i<this._arr.length;i++)
    {
        itemstring+=this._arr[i];
    }
    itemstring = this._arr.join("");
        this.container=document.createElement("DIV");
    this.panel.appendChild(this.container);
        this.container.style.width=this._w;
    this.container.style.height=this._h; this.scrollBox_1=document.createElement("DIV");
    this.scrollBox_1.style.float = "left";
    this.scrollBox_1.style.clear = "left";
    //注意scrollBox_1和scrollBox_2的宽度必须要>=里面的元素总宽度，正是因为你这个太窄了才导致里面的元素的float属性失效
    this.scrollBox_2=document.createElement("DIV");
    this.scrollBox_2.style.float = "right";
    this.scrollBox_2.style.clear = "right";
    this.container.appendChild(this.scrollBox_1);
    this.container.appendChild(this.scrollBox_2); this.scrollBox_1.innerHTML=itemstring;
    this.scrollBox_2.innerHTML=itemstring; if(this._d=="left" || this._d=="right")
    {
        
        this.container.style.overflowX="hidden";
        this.scrollBox_1.className="b1";
    this.scrollBox_2.className="b1";
    this.scrollBox_1.style.height=this._h;
    this.scrollBox_2.style.height=this._h;

    }
    else if(this._d=="up" || this._d=="down")
    {
        this.container.style.overflowY="hidden";
        this.scrollBox_1.style.width=this._w;
    this.scrollBox_2.style.width=this._w;
        if(this._d=="down")
    {
        this.container.scrollTop=this.container.scrollHeight;
    }
    }
    this.scroll();

    }
      

  3.   

    哈，具体你在调试吧。我简单实现效果先^o^<html>
    <head>
    <script language="javascript">    /*
     *    @function:
     *   @author:hanpoyangtitan
     *   @param: width,height,speed,panel,directin,item
     *   @date:2007-5-21
     */
        function Marquee(width,height,delay,panel,direction)
    {
        this._w=width;         //外层容器宽度
    this._h=height;        //外层容器高度
    this._delay=delay;        //滚动的速度
    this.panel=panel;
    this.container=null;
    this.scrollBox_1=null;
    this.scrollBox_2=null;  
    this._d=direction;     //方向
    this._arr=[];        //滚动的内容
    } Marquee.prototype.push=function(str)
    {
        this._arr.push(str);
    } Marquee.prototype.init=function()
    {
        var itemstring="";
    for(var i=0;i<this._arr.length;i++)
    {
        itemstring+=this._arr[i];
    }
    itemstring = this._arr.join("");
        this.container=document.createElement("DIV");
    this.panel.appendChild(this.container);
        this.container.style.width=this._w;
    this.container.style.height=this._h; this.scrollBox_1=document.createElement("DIV");
    this.scrollBox_1.style.float = "left";
    this.scrollBox_1.style.clear = "left";
    this.scrollBox_1.style.width = "306px";
    //注意scrollBox_1和scrollBox_2的宽度必须要>=里面的元素总宽度，正是因为你这个太窄了才导致里面的元素的float属性失效
    this.scrollBox_2=document.createElement("DIV");
    this.scrollBox_2.style.float = "right";
    this.scrollBox_2.style.clear = "right";
    this.scrollBox_2.style.width = "306px";
    this.container.appendChild(this.scrollBox_1);
    this.container.appendChild(this.scrollBox_2); this.scrollBox_1.innerHTML=itemstring;
    this.scrollBox_2.innerHTML=itemstring; if(this._d=="left" || this._d=="right")
    {
        
        this.container.style.overflowX="hidden";
        this.scrollBox_1.className="b1";
    this.scrollBox_2.className="b1";
    this.scrollBox_1.style.height=this._h;
    this.scrollBox_2.style.height=this._h;

    }
    else if(this._d=="up" || this._d=="down")
    {
        this.container.style.overflowY="hidden";
        this.scrollBox_1.style.width=this._w;
    this.scrollBox_2.style.width=this._w;
        if(this._d=="down")
    {
        this.container.scrollTop=this.container.scrollHeight;
    }
    }
    this.scroll();

    } Marquee.prototype.scroll=function()
    {
    switch(this._d)
    {
        case "left":
        if(this.container.scrollLeft-this.scrollBox_1.offsetWidth>=0)
    {
        this.container.scrollLeft-=this.scrollBox_1.offsetWidth;
    }
    this.container.scrollLeft++;
    break;
    case "right":
    if(this.container.scrollLeft-this.scrollBox_1.offsetWidth<=(0-this.container.offsetWidth))
    {
        this.container.scrollLeft+=this.scrollBox_1.offsetWidth;
    }
    this.container.scrollLeft--;
    break;
    case "up":
        if(this.container.scrollTop-this.scrollBox_1.offsetHeight>=0)
    {
        this.container.scrollTop-=this.scrollBox_1.offsetHeight;
    }
    this.container.scrollTop++;
    break;
    case "down":
        if(this.container.scrollTop-this.scrollBox_1.offsetHeight<=(0-this.container.offsetHeight))
    {
        this.container.scrollTop+=this.scrollBox_1.offsetHeight;
    }
    this.container.scrollTop--;
    break;
    default:
    }
    var obj=this;
    setTimeout(function(){obj.scroll()},this._delay);
    } window.onload=function()
    {
        var m=new Marquee(200,25,100,document.getElementById("cc"),"left");
    m.push("<div class=\"n1\" style=\"\">aaaaaaaaaaaaaaaa<\/div>");
    m.push("<div class=\"n1\">bbbbbbbbbbbbbbbb<\/div>");
    m.push("<div class=\"n1\">cccccccccccccccc<\/div>");
    m.init();
    }
    /*
        问题总结:当向下滚动时scrollTop=scrollHeight-container.offsetHeight
    */
    function debug(str)
    {
        document.body.insertAdjacentHTML("BeforeEnd",str);
    }
    </script>
    <style type="text/css">
       li{
           height:25px;
       list-style:none;
       }
       
       .n1{
       float:left;
       width:100px;
       overflow:hidden;
       height:25px;
       border:1px solid blue;
       }
       
       .b1{
        float:left;
       }
    </style>
    </head>
    <body>
    <div id="cc" style="width:200px; height:25px; border:1px solid #EEEEEE;" ></div>
    </body>
    </html>