|
向上滚动的代码：
<div id=demo style=overflow:hidden;height:250;width:200;background:#009900;color:#006600>
<table align=top>
<tr>
<td id=demo1 valign=top>
<img src="images/001.jpg" width="200" height="150" />
<img src="images/002.jpg" width="200" height="150" />
<img src="images/003.jpg" width="200" height="150" />
<img src="images/004.jpg" width="200" height="150" />
<img src="images/005.jpg" width="200" height="150" />
<img src="images/006.jpg" width="200" height="150" />
<img src="images/007.jpg" width="200" height="150" /> </td></tr><tr><td id=demo2 valign=top>
</td></tr></table></div>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML//克隆demo1为demo2
function Marquee(){
if(demo2.offsetHeight-demo.scrollTop<=0)//当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)//设置定时器
demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器
</script>
--------------------------------------------------------------------------------
向下滚动：
<div id=demo style=overflow:hidden;height:250;width:200;background:#009900;color:#006600>
<table align=top cellpadding=0 cellspace=0 border=0>
<tr><td id=demo1 valign=top>
<img src="images/001.jpg" width="200" height="150" />
<img src="images/002.jpg" width="200" height="150" />
<img src="images/003.jpg" width="200" height="150" />
<img src="images/004.jpg" width="200" height="150" />
<img src="images/005.jpg" width="200" height="150" />
<img src="images/006.jpg" width="200" height="150" />
<img src="images/007.jpg" width="200" height="150" /> </td></tr><tr><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollTop<=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向左滚动：
<div id="demo" style="overflow:hidden;height:160;width:400;background:#009900;color:#006600;">
<table align=left >
<tr>
<td id=demo1 valign="middle">
<table align="center" >
<tr>
<td align="center" valign="middle">
<img src="images/001.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/002.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/003.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/004.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/005.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/006.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/007.jpg" width="200" height="150" />
</td>
</tr></table>
</td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{demo.scrollLeft++}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
--------------------------------------------------------------------------------
向右滚动：
<div id=demo style=overflow:hidden;height:160;width:400;background:#009900;color:#000000>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign="middle">
<table align="center" >
<tr>
<td align="center" valign="middle">
<img src="images/001.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/002.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/003.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/004.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/005.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/006.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/007.jpg" width="200" height="150" />
</td>
</tr></table> </td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
|
