首尾相连无缝滚动特效,此特效可以实现文字,图片,从右向走首尾相连无缝滚动,图片和文字可以是直接写上的也可以是从数据库中取出的。
下面以直接添加上的图片为例,对于文字只需把图片替换就可以了:
<table cellspacing=0 cellpadding=0 width=300 align=center border=0>
<tr>
<td height=25>
<div id=demo style="OVERFLOW: hidden; WIDTH: 300px; COLOR: #ffffff; HEIGHT: 25px">
<table cellPadding=0 align=left border=0 cellspacing=0>
<tr>
<td id=demo1 width=300>
<table cellspacing=0 cellpadding=0 width=300 align=center border=0>
<tr>
<td width=300><img src=skins/default/UBB/Icons/flash.gif><img src=skins/default/UBB/Icons/music.gif><img src=skins/default/UBB/Icons/flash.gif><img src=skins/default/UBB/Icons/music.gif></td>
</tr>
</table>
</td>
<td id=demo2></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<SCRIPT>
var speed=8
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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
下面以直接添加上的图片为例,对于文字只需把图片替换就可以了:
<table cellspacing=0 cellpadding=0 width=300 align=center border=0>
<tr>
<td height=25>
<div id=demo style="OVERFLOW: hidden; WIDTH: 300px; COLOR: #ffffff; HEIGHT: 25px">
<table cellPadding=0 align=left border=0 cellspacing=0>
<tr>
<td id=demo1 width=300>
<table cellspacing=0 cellpadding=0 width=300 align=center border=0>
<tr>
<td width=300><img src=skins/default/UBB/Icons/flash.gif><img src=skins/default/UBB/Icons/music.gif><img src=skins/default/UBB/Icons/flash.gif><img src=skins/default/UBB/Icons/music.gif></td>
</tr>
</table>
</td>
<td id=demo2></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<SCRIPT>
var speed=8
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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>