以下是 js垂直无接缝图片滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>abc</title>
<style type="text/css">
<!--
TD {FONT-SIZE: 12px;}
</style>
</head>
<body>
<div id=link_logo style="OVERFLOW: hidden; WIDTH: 160px; HEIGHT: 235px">
<div id=link_logo1 style="OVERFLOW: hidden">
<table cellspacing=0 cellpadding=0 width=164 border=0>
<tbody>
<tr>
<td valign=top align=middle height=33><table cellspacing=0 cellpadding=2 border=0>
<tbody>
<tr>
<td align=middle><a
href="#"
target=_blank><img alt=""
src="images34/sina_lady_2.gif"
border=0></a></td>
</tr>
</tbody>
</table></td>
<td valign=top align=middle height=33><table cellspacing=0 cellpadding=2 border=0>
<tbody>
<tr>
<td align=middle><a href="#"
target=_blank><img alt=""
src="images34/tomlady2_1.jpg"
border=0></a></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td valign=top align=middle height=33><table cellspacing=0 cellpadding=2 border=0>
<tbody>
<tr>
<td align=middle><a href="#"
target=_blank><img alt=""
src="images34/qqfashion_1.gif"
border=0></a></td>
</tr>
</tbody>
</table></td>
<td valign=top align=middle height=33><table cellspacing=0 cellpadding=2 border=0>
<tbody>
<tr>
<td align=middle><a href="#"
target=_blank><img alt=""
src="images34/sohuwomen_logo_1.gif"
border=0></a></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td valign=top align=middle height=33><table cellspacing=0 cellpadding=2 border=0>
<tbody>
<tr>
<td align=middle><a href="#"
target=_blank><img alt=""
src="images34/LOGOshishang.gif"
border=0></a></td>
</tr>
</tbody>
</table></td>
<td valign=top align=middle height=33><table cellspacing=0 cellpadding=2 border=0>
<tbody>
<tr>
<td align=middle><a href="#"
target=_blank><img alt=""
src="images34/xinhu_1.jpg"
border=0></a></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td valign=top align=middle height=33><table cellspacing=0 cellpadding=2 border=0>
<tbody>
<tr>
<td align=middle><a href="#"
target=_blank><img alt=""
src="images34/wuyuan_logo_1.jpg"
border=0></a></td>
</tr>
</tbody>
</table></td>
<td valign=top align=middle height=33><table cellspacing=0 cellpadding=2 border=0>
<tbody>
<tr>
<td align=middle><a href="#"
target=_blank><img alt=""
src="images34/phoenix_logo_1.gif"
border=0></a></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td valign=top align=middle height=33><table cellspacing=0 cellpadding=2 border=0>
<tbody>
<tr>
<td align=middle><a href="#"
target=_blank><img alt=""
src="images34/zgsslogo_1.jpg"
border=0></a></td>
</tr>
</tbody>
</table></td>
<td valign=top align=middle height=33><table cellspacing=0 cellpadding=2 border=0>
<tbody>
<tr>
<td align=middle><a href="#"
target=_blank><img alt=""
src="images34/singdao_logo_1.gif"
border=0></a></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td valign=top align=middle height=33><table cellspacing=0 cellpadding=2 border=0>
<tbody>
<tr>
<td align=middle><a
href="#"
target=_blank><img alt=""
src="images34/elady8831_1_1.gif"
border=0></a></td>
</tr>
</tbody>
</table></td>
<td valign=top align=middle height=33><table cellspacing=0 cellpadding=2 border=0>
<tbody>
<tr>
<td align=middle><a href="#"
target=_blank><img alt=""
src="images34/phoenix_logo_1.gif"
border=0></a></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td valign=top align=middle height=33><table cellspacing=0 cellpadding=2 border=0>
<tbody>
<tr>
<td align=middle><a href="#"
target=_blank><img alt=""
src="images34/rayli_logo_1.gif"
border=0></a></td>
</tr>
</tbody>
</table></td>
<td valign=top align=middle height=33><table cellspacing=0 cellpadding=2 border=0>
<tbody>
<tr>
<td align=middle><a href="#"
target=_blank><img alt=""
src="images34/ziwei_logo_88x31_1.gif"
border=0></a></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td valign=top align=middle height=33><a
href="#"
target=_blank><img alt=""
src="images34/cri_logo.jpg" border=0></a></td>
<td valign=top align=middle height=33><a
href="#" target=_blank><img alt=""
src="images34/blogchina_logo_1.gif"
border=0></a></td>
</tr>
<tr>
<td valign=top align=middle height=33><img alt=""
src="images34/yl(1)-(4).gif" border=0></td>
<td valign=top align=middle height=33><a
href="#" target=_blank><img alt=""
src="images34/logonvxing_1.gif"
border=0></a></td>
</tr>
<tr>
<td valign=top align=middle height=33><a
href="#" target=_blank><img alt=""
src="images34/rayli_logo_1.gif"
border=0></a></td>
<td valign=top align=middle height=33><a
href="#" target=_blank><img alt=""
src="images34/singdao_logo_1.gif"
border=0></a></td>
</tr>
<tr>
<td valign=top align=middle height=33><a
href="#" target=_blank><img
alt="" src="images34/dadushi_1.gif"
border=0></a></td>
<td valign=top align=middle height=33><a
href="#" target=_blank><img alt=""
src="images34/ered_logo_1.gif"
border=0></a></td>
</tr>
<tr>
<td valign=top align=middle height=33><a
href="#" target=_blank><img alt=""
src="images34/uusee_logo_1.gif"
border=0></a></td>
<td valign=top align=middle height=33><a
href="#" target=_blank><img alt=""
src="images34/shelogo_1_1.gif"
border=0></a></td>
</tr>
<tr>
<td valign=top align=middle height=33><a
href="#" target=_blank><img alt=""
src="images34/8831_1.gif" border=0></a></td>
<td valign=top align=middle height=33><a
href="#" target=_blank><img alt=""
src="images34/efulogo_88x31_1.gif"
border=0></a></td>
</tr>
<tr>
<td valign=top align=middle height=33><a
href="#" target=_blank><img alt=""
src="images34/daqi_logo.gif" border=0></a></td>
<td valign=top align=middle height=33><a
href="#" target=_blank><img alt=""
src="images34/ad_logo_1.gif"
border=0></a></td>
</tr>
<tr>
<td valign=top align=middle height=33><a
href="#"
target=_blank><img alt=""
src="images34/linklogo_me6623.gif"
border=0></a></td>
<td valign=top align=middle height=33><a
href="#" target=_blank><img alt=""
src="images34/logo_belle_66x23.jpg"
border=0></a></td>
</tr>
<tr>
<td valign=top align=middle height=33><a
href="#"
target=_blank><img alt=""
src="images34/ocjlogo_66x23.jpg"
border=0></a></td>
<td valign=top align=middle height=33><a
href="#" target=_blank><img alt=""
src="images34/efulogo_88x31_1.gif"
border=0></a></td>
</tr>
<tr>
<td valign=top align=middle height=33><a
href="#" target=_blank><img alt=""
src="images34/dianping_Logo_66_23.gif"
border=0></a></td>
<td valign=top align=middle
height=33></td>
</tr>
</tbody>
</table>
</div>
<div id=link_logo2></div>
</div>
<script>
var speed=65
link_logo2.innerHTML=link_logo1.innerHTML
function Marquee2(){
if(link_logo2.offsetTop-link_logo.scrollTop<=0)
link_logo.scrollTop-=link_logo1.offsetHeight
else{
link_logo.scrollTop++
}
}
var MyMar2=setInterval(Marquee2,speed)
link_logo.onmouseover=function() {clearInterval(MyMar2)}
link_logo.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
