您的位置：首页 > 产品设计 > UI/UE

【网摘】JS实现无间断向左滚动marquee

2010-08-02 14:04 363 查看
JS实现无间断marquee

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
.box {border:#c5e4ff 1px solid;margin-top:10px;}
#foot {margin:0 auto;height:82px;padding:0 0 24px 0;width:901px;}
#foot_mid {float:left;margin-top:24px;overflow:hidden;width:900px;}
</style>
</HEAD>

<BODY>
<div id="foot" class="box">
<div id="foot_left"></div>
<div id="foot_mid">
<table>
<tr>
<td id="demo_b1" valign="bottom" align="center">
<table>
<tr>
<td width="118" valign="bottom"><img title="当乐网" src="http://www.uucun.com/images/p1.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
<td width="118" valign="bottom"><img title="诺基亚" src="http://www.uucun.com/images/p2.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
<td width="118" valign="bottom"><img title="3G门户" src="http://www.uucun.com/images/p3.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
<td width="118" valign="bottom"><img title="Windows live" src="http://www.uucun.com/images/p4.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
<td width="118" valign="bottom"><img title="搜狐" src="http://www.uucun.com/images/p5.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
<td width="118" valign="bottom"><img title="飞信" src="http://www.uucun.com/images/p6.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
<td width="118" valign="bottom"><img title="易查" src="http://www.uucun.com/images/p7.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
<td width="118" valign="bottom"><img title="优视动景" src="http://www.uucun.com/images/p8.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
<td width="118" valign="bottom"><img title="百度" src="http://www.uucun.com/images/p9.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
<td width="118" valign="bottom"><img title="新浪网" src="http://www.uucun.com/images/p10.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
<td width="118" valign="bottom"><img title="贝多" src="http://www.uucun.com/images/p11.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
<td width="118" valign="bottom"><img title="移动书城" src="http://www.uucun.com/images/p12.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
<td width="118" valign="bottom"><img title="魅媒科技" src="http://www.uucun.com/images/p16.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
</tr>
</table>
</td>
<td id="demo_b2" valign="top"><br><br></td>
</tr>
</table>
</div>
<div id="foot_right"></div>
</div>
</BODY>

</HTML>
<script type="text/javascript">
var speed_b = 30;
document.getElementById('demo_b2').innerHTML = document.getElementById('demo_b1').innerHTML;
function Marquee_b(){
if(document.getElementById('demo_b2').offsetWidth - document.getElementById('foot_mid').scrollLeft <= 0)
{
document.getElementById('foot_mid').scrollLeft -= document.getElementById('demo_b1').offsetWidth;
}
else
{
document.getElementById('foot_mid').scrollLeft++;
}
}
var MyMar_b=setInterval(Marquee_b,speed_b);
document.getElementById('foot_mid').onmouseover = function() {clearInterval(MyMar_b);}
document.getElementById('foot_mid').onmouseout = function() {MyMar_b=setInterval(Marquee_b,speed_b);}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航