文字自動迴圈滾動 的js 函數

來源:互聯網
上載者:User

<script language='javascript'>
<!--
/********************************/
/*  文字自動迴圈滾動  */
/*  IE6 FF1.0.4    */
/*  不支援xhtml聲明的文檔 */
/********************************/

//*********不要修改這部分***************
//scrollBodyId: String 內部滾動div的id
//scrollBoxId: String 外面限制div的id
//showHeight: Int 限制顯示高度
//showWidth: Int 限制顯示寬度
//lineHeight: Int 每行的高度
//stopTime:  Int 間隔停止的時間(毫秒)
//speed:  Int 捲動速度(毫秒,越小越快)
var ScrollObj = function(scrollBodyId,scrollBoxId,showHeight,showWidth,lineHeight,stopTime,speed) {
 this.obj = document.getElementById(scrollBodyId);
 this.box = document.getElementById(scrollBoxId);
 
 this.style = this.obj.style;
 this.defaultHeight = this.obj.offsetHeight;
 
 this.obj.innerHTML += this.obj.innerHTML;
 this.obj.style.position = "relative";
 
 this.box.style.height = showHeight;
 this.box.style.width = showWidth;
 this.box.style.overflow = "hidden";
 
 this.scrollUp = doScrollUp;

 this.stopScroll = false;
 
 this.curLineHeight = 0;
 this.lineHeight = lineHeight;
 this.curStopTime = 0;
 this.stopTime = stopTime;
 this.speed = speed;

 this.style.top = lineHeight;

 this.object = scrollBodyId + "Object";
 eval(this.object + "=this");
 setInterval(this.object+".scrollUp()",speed);
 this.obj.onmouseover=new Function(this.object+".stopScroll=true");
 this.obj.onmouseout=new Function(this.object+".stopScroll=false");
}
function doScrollUp() {
 if( this.stopScroll == true )
  return;
   this.curLineHeight += 1;
   if( this.curLineHeight >= this.lineHeight ) {
    this.curStopTime += 1;
    if( this.curStopTime >= this.stopTime ) {
     this.curLineHeight = 0;
     this.curStopTime = 0;
    }
   }
 else {   
    this.style.top = parseInt(this.style.top) - 1;
    if( -parseInt(this.style.top) >= this.defaultHeight ) {
      this.style.top = 0;
    }
   }
}
//***************這以上不要修改******************
//-->
</script>

 

調用方法:

<div id="scroollBox" style="border:0px ; ">
<div id="scroollBody">阿斯科利的積分卡士大夫
</div>
</div>
<script language="javascript" type="text/javascript">
<!--
//var sample = new ScrollObj(String 內部滾動div的id, String 外面限制div的id, Int 限制顯示高度, Int 限制顯示寬度, Int 每行的高度, Int 間隔停止的時間(毫秒), Int 捲動速度(毫秒,越小越快));
var sample = new ScrollObj("scroollBody", "scroollBox", 110, 560, 111, 50, 10);
// -->
</script>

 

 

左右滾動 js:

var speed3=25//速度數值越大速度越慢
demo2.innerHTML = demo1.innerHTML

function Marquee()
{
    if(demo2.offsetWidth-demo.scrollLeft<=0)
        demo.scrollLeft-=demo1.offsetWidth
    else{
        demo.scrollLeft++
    }
}

var MyMar = setInterval(Marquee, speed3)

demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout = function() { MyMar = setInterval(Marquee, speed3) }

調用 方法:

      <DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
      <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
        <TBODY>
        <TR>
          <TD id=demo1 vAlign=top><table width="1710" height="116"  border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="171" background="images/pic_bg.jpg"><div align="center">1</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">
                <p>2</p>
                </div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">3</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">4</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">5</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">6</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">7</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">8</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">9</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">10</div></td>
            </tr>
          </table></TD>
          <TD id=demo2 vAlign=top>&nbsp;
          </TD></TR></TBODY></TABLE></DIV>

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.