<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-ch" lang="zh-ch">
<head>
<title>通用不间断滚动类</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache,must-revalidate" />
<meta http-equiv="expires" content="0" />
<script src="MarqueeClass.js" type="text/javascript"></script>
<style type="text/css">
a,body,select{font-size:12px;text-decoration:none;}
</style>
</head>
<body>
<span style="color:#ff0000">仅用div的时候需要用<nobr>来包括div</span>
<fieldset style="padding:5px;width:770px">
<legend>不间断滚动实例</legend>
<center>
鼠标悬停控制，左移鼠标，向左移动；反之亦然。
<nobr>
<div id="marqueedivmouse" style="width:760px;overflow:auto;"><img src="images/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></div>
</nobr>
<br>
<hr>
<br>
文字翻屏滚动
<br />需要文字内容高度大于div定义的高度，如果小了，则无法移动。
<div id="textdiv" style="border:1 solid #c0c0c0;text-align:left;width:760px;height:42px;overflow:hidden;">
隐形的翅膀<br />每一次<br />都在徘徊孤单中坚强<br />每一次<br />就算很受伤<br />也不闪泪光<br />我知道<br />我一直有双隐形的翅膀<br />带我飞<br />飞过绝望<br />不去想<br />他们拥有美丽的太阳<br />我看见<br />每天的夕阳<br />也会有变化<br />我知道<br />我一直有双隐形的翅膀<br />带我飞<br />给我希望<br />我终于<br />看到<br />所有梦想都开花<br />追逐的年轻<br />歌声多嘹亮<br />我终于<br />翱翔<br />用心凝望不害怕<br />哪里会有风<br />就飞多远吧<br />隐形的翅膀<br />让梦恒久比天长<br />留一个<br />愿望<br />让自己想象
</div>
<br>
<hr>
<br>
文字间歇滚动
<br />需要文字内容高度大于div定义的高度，如果小了，则无法移动。
<div id="textdiv1" style="border:1 solid #c0c0c0;text-align:left;width:760px;height:42px;overflow:hidden;">
隐形的翅膀<br />每一次<br />都在徘徊孤单中坚强<br />
</div>
<br>
<hr>
<br>
向上翻屏滚动
<div id="marqueediv1" style="width:760px;height:138px;overflow:hidden;">
<table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="52" align="center" valign="middle"><img src="images/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"></td>
</tr>
<tr>
<td height="52" align="center" valign="middle"><img src="images/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></td>
</tr>
</table>
</div>
<br>
<hr>
<br>
向下翻屏滚动
<div id="marqueediv2" style="width:760px;height:138px;overflow:hidden;">
<table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="52" align="center" valign="middle"><img src="images/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"></td>
</tr>
<tr>
<td height="52" align="center" valign="middle"><img src="images/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></td>
</tr>
</table>
</div>
<br>
<hr>
<br>
向左翻屏滚动
<nobr>
<div id="marqueediv3" style="width:640px;height:138px;overflow:hidden;"><img src="images/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></div>
</nobr>
<br>
<hr>
<br>
向右翻屏滚动
<nobr>
<div id="marqueediv4" style="width:640px;height:138px;overflow:hidden;"><img src="images/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></div>
</nobr>
<br>
<hr>
<br>
向上连续滚动
<div id="marqueediv5" style="width:760px;height:138px;overflow:hidden;">
<table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="52" align="center" valign="middle"><img src="images/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"></td>
</tr>
<tr>
<td height="52" align="center" valign="middle"><img src="images/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></td>
</tr>
</table>
</div>
<br>
<hr>
<br>
向左连续滚动
<nobr>
<div id="marqueediv6" style="width:760px;height:138px;overflow:hidden;"><img src="images/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="images/pic8.gif" style="width:126px;height:138px" border="0"
不间断滚动图片JS代码
需积分: 9 173 浏览量
2009-05-31
09:50:39
上传
评论
收藏 65KB RAR 举报
.rar （10个子文件） 
images 
pic7.gif 8KB pic1.gif 8KB pic2.gif 7KB pic3.gif 8KB pic8.gif 9KB pic4.gif 7KB pic6.gif 7KB pic5.gif 8KB
MarqueeClass.js 5KB 通用不间断滚动.htm 10KB资源评论
