其实也没什么大问题,但是还是记一下~
今天想搞个js实现图片水平无间断滚动的代码~
到网上翻了一下资料,最多被转的应该就是下面这段代码了,可是改成自己想用的效果的时候却受到了限制!
<base href="http://www.7880.com">
<div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
<img src="images/link/flashempire.gif"><img src="images/linklogo/shlogo.gif">
<img src="images/link/deskcity.gif"><img src="images/linklogo/5dmeng.gif">
<img src="/Upload/2004_Pack/logo.gif"><img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif"><img src="/Upload/2004_Pack/link.gif">
<img src="images/flash8.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
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>
这代码给一个急需要的人有用么?
尝试着改了一下div的长度和宽度 才发现根据以上的代码,来更改长度无法滚动,或是只滚动了一张图片就跳了~
其实原理也不过是通过demo1和demo2的的无缝连接来实现的~
修改后的代码:
<table width="1003" border="0" align="center" cellpadding="0" cellspacing="0">//这个table是用来放div的~ 在你的页面设置具体的位置
<tr>
<td><div id=demo style="overflow:hidden; height:160; width:1003;">//此处的1003就是你要显示滚动部分的长度
<table width="1003" height="160" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">//这里的宽度不要低与div的宽度 就可以不间断滚动了~
<tr>
<td id=demo1 valign=top>
<table width="1003" height="160" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td><img src="img/tupian.gif" width="150" height="150" /></td>
<td><img src="img/tupian1.gif" width="150" height="150" /></td>
<td><img src="img/tupian2.gif" width="150" height="150" /></td>
<td><img src="img/tupian.gif" width="150" height="150" /></td>
<td><img src="img/tupian1.gif" width="150" height="150" /></td>
<td><img src="img/tupian2.gif" width="150" height="150" /></td>
</tr>
</table>
</td>
<td bgcolor="#FF0000" id=demo2 valign=top></td>
</tr>
</table>
</div> </td>
</tr>
</table>
<script>
var speed=30
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>
关键是让demo1和demo2在有效的长度范围内能接起来 就可以滚动了~
以上代码改几个数值和显示内容就可以直接复制使用了