图片或文字上下左右滚动【JS向上滚动、JS向下滚动、JS向左滚动、JS向右滚动】...

注：上下滚动时，单元格demo1里面的内容高度要大于demo设置的高度才能无限滚动
       左右滚动时，单元格demo1里面的内容宽度要大于demo设置的宽度才能无限滚动
一、上下滚动
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 >

 二、左右滚动
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 >  

 

很不错的网盘(http://ww618.com/-旺旺618 祝博友们每天旺，每天发。))

 

 

转载于:https://www.cnblogs.com/NetCSharp/archive/2010/01/16/1649195.html