不间断的滚动（横向/纵向）
项目中用到的一段不间断的滚动代码，很不错，与大家分享一下。（请注意，javascript是写在页面的最下方）
1、纵向不间断的滚动的页面代码：
<!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" >
<head>
<title>无标题页</title>
</head>
<body>
<div>
站内公告</div>
<div id="demo" style="OVERFLOW: hidden; height: 100px;">
<div id="marquePic1">
第1行<br />
第2行<br />
第3行<br />
第4行<br />
第5行<br />
第6行<br />
第7行<br />
第8行<br />
第9行<br />
第10行<br />
第11行<br />
第12行
</div>
<div id="marquePic2" valign="top">
</div>
</div>
</body>
</html>
<script type="text/javascript">
//纵向滚动 需要设置div的高度
var speed=30
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollTop>=marquePic1.scrollHeight){
demo.scrollTop=0
}
else{
demo.scrollTop++
}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<div>
站内公告</div>
<div id="demo" style="OVERFLOW: hidden; height: 100px;">
<div id="marquePic1">
第1行<br />
第2行<br />
第3行<br />
第4行<br />
第5行<br />
第6行<br />
第7行<br />
第8行<br />
第9行<br />
第10行<br />
第11行<br />
第12行
</div>
<div id="marquePic2" valign="top">
</div>
</div>
</body>
</html>
<script type="text/javascript">
//纵向滚动 需要设置div的高度
var speed=30
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollTop>=marquePic1.scrollHeight){
demo.scrollTop=0
}
else{
demo.scrollTop++
}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
2、横向不间断的滚动的页面代码：
<!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">
<head>
<title>无标题页</title>
</head>
<body>
<div>
站内公告</div>
<div id="demo" style="overflow: hidden; width: 860px; align: center">
<table cellspacing="0" cellpadding="0" align="center" border="0">
<tbody>
<tr>
<td id="marquePic1" valign="top">
<table width="1800px">
<tr>
<td>第1个单元格</td>
<td>第2个单元格</td>
<td>第3个单元格</td>
<td>第4个单元格</td>
<td>第5个单元格</td>
<td>第6个单元格</td>
<td>第7个单元格</td>
<td>第8个单元格</td>
<td>第9个单元格</td>
<td>第10个单元格</td>
<td>第11个单元格</td>
<td>第12个单元格</td>
<td>第13个单元格</td>
<td>第14个单元格</td>
<td>第15个单元格</td>
</tr>
</table>
</td>
<td id="marquePic2" valign="top">
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript">
//横向滚动 需要设置div的宽度
var speed=30
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
</head>
<body>
<div>
站内公告</div>
<div id="demo" style="overflow: hidden; width: 860px; align: center">
<table cellspacing="0" cellpadding="0" align="center" border="0">
<tbody>
<tr>
<td id="marquePic1" valign="top">
<table width="1800px">
<tr>
<td>第1个单元格</td>
<td>第2个单元格</td>
<td>第3个单元格</td>
<td>第4个单元格</td>
<td>第5个单元格</td>
<td>第6个单元格</td>
<td>第7个单元格</td>
<td>第8个单元格</td>
<td>第9个单元格</td>
<td>第10个单元格</td>
<td>第11个单元格</td>
<td>第12个单元格</td>
<td>第13个单元格</td>
<td>第14个单元格</td>
<td>第15个单元格</td>
</tr>
</table>
</td>
<td id="marquePic2" valign="top">
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript">
//横向滚动 需要设置div的宽度
var speed=30
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
