为什么我的<marquee>只能循环一次就停了 代码如下

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>竞价大屏</title>
<style type="text/css">
body { background-color:#000000; font-family:Verdana, Geneva, sans-serif; font-weight:bold;}
 .div_jjdp { margin:0px auto; width:100%; height:auto; overflow:hidden;}
   .jjdp_l { margin:10px 0px; float:left; width:100%; height:500px; overflow:hidden;}
     .div_jjdp_l { margin:0px; float:left; width:100%; overflow:hidden; padding:10px;}
   .jjdp_table_l { border-bottom:2px dotted #CCC; text-align:center; font-size:14px; color:#ffff00; width:100%; height:40px;}
 

  .jjdp_h1 { font-size:24px; text-align:center; padding-bottom:10px; margin-bottom:5px; border-bottom:2px solid #FC6; width:100%; color:#FF0000; clear:both;}
  .div_jjdp th { font-size:18px; text-align:center; color:#FF9; vertical-align:middle; height:50px;}
  .div_jjdp_tb { margin-bottom:10px;  border-bottom:2px solid #CCC;}
.zt2 { font-size: 16px;
font-weight: bold;
color: #ffff00;
}
.td_01{width:11%;}
.td_02{width:10%;}
.td_03{width:19%;}
.td_04{width:10%;}
.td_05{width:9%;}
.td_06{width:9%;}
.td_07{width:11%;}
.td_08 { width:8%;}
.td_09 { width:13%;}
</style>
</head><body><div class="div_jjdp">
<h1 class="jjdp_h1">挂单应价列表信息---供交易所顾客参考</h1>
<table width="100%" border="0" class="div_jjdp_tb" cellspacing="0" cellpadding="0">
  <tr>
    <th class="td_01">挂单日期</th>
    <th class="td_02">商品代码</th>
    <th class="td_03">商品名称</th>
    <th class="td_04">挂单价</th>
    <th class="td_05">挂单量</th>
    <th class="td_06">剩余数量</th>
    <th class="td_07">最小交易单位</th>
    <th class="td_08">规格</th>
    <th class="td_09">挂单截止日</th>
  </tr></table>
<div class="jjdp_l" id="colee">
<div class="div_jjdp_l">
<div id="colee1">           
                 
                  <#list list?if_exists as goods>
                 <table border="0" cellspacing="0" cellpadding="0" class="jjdp_table_l">
        
    <tr>
    <td class="td_01"> ${goods.createDt?string('yyyyMMdd')}</td>
    <td class="td_02">${goods.productno?default('')}</td>
    <td class="td_03"><b>${goods.nameShort?default('')}</b></td>
    <td class="td_04" align="left">${goods.price?int}</td>
    <td class="td_05" align="left"> ${goods.count?default('')}</td>
    <td class="td_06"> ${goods.leavecount?default('')}</td>
    <td class="td_07">   ${goods.minnum?default('')} <#if goods.minunit?exists>  
                            
                           
                        <#if goods.minunit?default(1)==1>瓶</#if>
                            <#if goods.minunit?default(1)==2>箱</#if>
                       <#if goods.minunit?default(1)==3>桶</#if>
                       <#if goods.minunit?default(1)==4>柜</#if>
                       <#if goods.minunit?default(1)==5>套装</#if>
                    </#if></td>
    <td class="td_08"> <#if goods.units?exists>
                         <#if goods.units?default(1)=="1">1/瓶</#if>
                         <#if goods.units?default(1)=="2">6/瓶</#if>
                         <#if goods.units?default(1)=="3">12/瓶</#if>
    </#if>
    </td>
    <td class="td_09">${goods.enddt?string('yyyyMMdd')}</td>
   
  </tr>  </table>
  </#list>              
        
   </div>   <div id="colee2"></div>
<script>
var speed=30;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; 
function Marquee1(){if(colee2.offsetTop-colee.scrollTop<=0){
 colee.scrollTop-=colee1.offsetHeight; 
 }else{
  colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)
colee.onmouseover=function() {clearInterval(MyMar1)}
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
</div>
</div></div></body>
</html>

解决方案 »

  1.   

    <style type="text/css">
    body { background-color:#000000; font-family:Verdana, Geneva, sans-serif; font-weight:bold;}
     .div_jjdp { margin:0px auto; width:100%; height:auto; overflow:hidden;}
       .jjdp_l { margin:10px 0px; float:left; width:100%; height:20px; overflow:hidden;}
         .div_jjdp_l { margin:0px; float:left; width:100%; overflow:hidden;}
       .jjdp_table_l { border-bottom:2px dotted #CCC; text-align:center; font-size:14px; color:#ffff00; width:100%;}
       .jjdp_h1 { font-size:24px; text-align:center; padding-bottom:10px; margin-bottom:5px; border-bottom:2px solid #FC6; width:100%; color:#FF0000; clear:both;}
      .div_jjdp th { font-size:18px; text-align:center; color:#FF9; vertical-align:middle; height:50px;}
      .div_jjdp_tb { margin-bottom:10px;  border-bottom:2px solid #CCC;}
    .zt2 { font-size: 16px;
    font-weight: bold;
    color: #ffff00;
    }
    .td_01{width:11%;}
    .td_02{width:10%;}
    .td_03{width:19%;}
    .td_04{width:10%;}
    .td_05{width:9%;}
    .td_06{width:9%;}
    .td_07{width:11%;}
    .td_08 { width:8%;}
    .td_09 { width:13%;}
    </style>样式有问题,改成这样就可以无限滚动了，不过不知道是不是你想要的效果。
      

  2.   

    ~。~那还是样式问题.jjdp_l {position: relative; margin:10px 0px; float:left; width:100%; height:500px; overflow:hidden;}
      

  3.   


    function Marquee1(){
        if(colee2.offsetTop-colee.scrollTop<=(colee.offsetHeight-colee1.offsetHeight)){
            colee.scrollTop-=colee1.offsetHeight; 
        }else{
            colee.scrollTop++
        }
    }
    还有Marquee1方法改成这样，不然你最下面总是会有一部分看不到的。