文字自動迴圈滾動js函式
阿新 • • 發佈:2019-02-03
<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> </TD></TR></TBODY></TABLE></DIV>