圖片或文字迴圈滾動JS代碼收集

來源:互聯網
上載者:User

註:上下滾動時,儲存格demo1裡面的內容高度要大於demo設定的高度才能無限滾動
       左右滾動時,儲存格demo1裡面的內容寬度要大於demo設定的寬度才能無限滾動

 

 

一、左右滾動代碼

1.顯示內容

<div id="demo" style="overflow:hidden;height:100px;width:200px;">
<table cellpadding="0" cellspace="0" border="0">
<tr>
<td id="demo1"><table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>一</td>
      <td>二</td>
      <td>三</td>
    </tr>
</table></td>
<td id="demo2"></td>
</tr>
</table>
</div>

2.向左滾動JS

<script>
var speed=30
var MyMar=setInterval(Marquee,speed)
demo2.innerHTML=demo1.innerHTML
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
   demo.scrollLeft-=demo1.offsetWidth
else{
   demo.scrollLeft++
}
}
</script>

3.向右滾動JS

<script> 
var speed=30
var MyMar=setInterval(Marquee,speed)
demo2.innerHTML=demo1.innerHTML
demo.onmouseover=function() {clearInterval(MyMar)} 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
function Marquee(){ 
if(demo.scrollLeft<=0) 
   demo.scrollLeft+=demo2.offsetWidth 
else{ 
   demo.scrollLeft-- 


</script>


二、上下滾動代碼

1.顯示的內容
<div id="demo" style="OVERFLOW: hidden; WIDTH: 200px; HEIGHT: 100px; ">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
   <td id="demo1"><table width="100%" height="99" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td>一</td>
          </tr>
          <tr>
            <td>二</td>
          </tr>
          <tr>
            <td>三</td>
          </tr>
        </table></td>
</tr>
<tr>
   <td id="demo2"></td>
</tr>
</table>
</div>

2.向上滾動JS

<SCRIPT>
var speed=30
var MyMarh=setInterval(Marqueeh,speed)
demo2.innerHTML=demo1.innerHTML
//原理是不斷的向demoh2中填入demoh1中的內容,然後將已經看不見的清除
//用一個兩行一列的表格,上一列再放一個裝填有內容的表格,定義為demoh1,下一列是空的TD,定義為demoh2
//SPEED是用來控制速度的。
demo.onmouseover=function(){ clearInterval(MyMarh) }
demo.onmouseout=function(){ MyMarh=setInterval(Marqueeh,speed) }
function Marqueeh(){
if(demo2.offsetHeight-demo.scrollTop<=0)
   demo.scrollTop-=demo1.offsetHeight
else{
   demo.scrollTop++
}
}
</SCRIPT>

3.向下滾動JS

<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
   demo.scrollTop+=demo2.offsetHeight
else{
   demo.scrollTop--
}
}
</script>

經過測試,效果還可以,只是美中有點不足,在相容性方面稍差.現在的瀏覽器太多太雜了..悲局呀!...

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.