无间断上下滚动

最新推荐文章于 2023-07-03 10:57:21 发布

什么都不能

最新推荐文章于 2023-07-03 10:57:21 发布

阅读量912

点赞数

分类专栏： javascript 文章标签： function delay html div javascript null

本文链接：https://blog.csdn.net/hanpoyangtitan/article/details/1620765

版权

javascript 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<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.toString=function(_arr)
{
      var html="";
      switch(this._d)
   {
    case "up":
    case "down":
        for(var i=0;i<_arr.length;i++)
        {
            html+="<div style=/"vertical-align:middle;/"><a href=/""+_arr[i].link+"/" title=/""+_arr[i].title+"/" target=/""+_arr[i].target+"/">"+_arr[i].text+"</a></div>";
        }
    break;
   }
   return html;
}

Marquee.prototype.init=function()
{
     var itemstring=this.toString(this._arr);
     this.container=document.createElement("DIV");
  this.panel.appendChild(this.container);
     this.container.style.width=this._w;
  this.container.style.height=this._h;

//设置scrollBox_1的属性
this.scrollBox_1=document.createElement("DIV");

  //设置scrollBox_2的属性
  this.scrollBox_2=document.createElement("DIV");

  this.scrollBox_1.innerHTML=itemstring;
  this.scrollBox_2.innerHTML=itemstring;
  this.container.appendChild(this.scrollBox_1);
  this.container.appendChild(this.scrollBox_2);

     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 "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);
}

function nodeElement(link,text,title,target,className)
{
      this.link=link;
   this.text=text;
   this.title=title;
   this.target=target;
   this.className=className;
}

window.οnlοad=function()
{
     var m=new Marquee(200,25,100,document.getElementById("cc"),"up");
  m.push(new nodeElement("http://www.baidu.com","百度搜索引擎","百度一下，你就知道","_blank",""));
  m.push(new nodeElement("http://www.163.com","网易","中国网易","_blank",""));
  m.push(new nodeElement("http://www.yahoo.com","雅虎，门户","雅虎，门户","_blank",""));
  m.push(new nodeElement("http://www.csdn.net","中国程序员论坛","中国最大的程序员论坛，高手云集","_blank",""));
  m.init();
}

/*
问题总结:当向下滚动时scrollTop=scrollHeight-container.offsetHeight
*/
function debug(str)
{
document.body.insertAdjacentHTML("BeforeEnd",str);
}
</script><style type="text/css">

body{
font-size:9pt;
}</style>
<div id="cc" style="BORDER-RIGHT: #eeeeee 1px solid; BORDER-TOP: #eeeeee 1px solid; BORDER-LEFT: #eeeeee 1px solid; WIDTH: 200px; BORDER-BOTTOM: #eeeeee 1px solid; HEIGHT: 25px"></div>