asp.net中Repeater结合javascript实现无缝滚动

今天在做一个滚动显示广告栏的时候碰到了一个小小的问题

 

之前写的滚动代码

 

<table style=" width:240px ; background-color:#EDF1F8" >
       <tr style=" background-color:#104E8B;">
       <td valign="top">
           <asp:Label ID="Label2" runat="server" ForeColor="White"  Font-Size="12px" Text="调度记事"></asp:Label>
          </td>
           <td align="right" style=" width:60px">
                    <A style=" color:White"  href="Module/FrameWork/XGReport/XG_Offduty.aspx">更多&gt;&gt;&gt;</A>
                  
        </td>
             
       </tr>
       <tr>
       <td colspan="2" >
       <marquee onmouseover="this.stop();" onmouseout="this.start();" scrollamount="3" scrolldelay="90"
                                                                        direction="up" height="200">
                                                                        <table  cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
                                                                            <tbody>
                                                                                <asp:Repeater ID="Repeater1" runat="server" >
                                                                                    <ItemTemplate>
                                                                                        <tr>
                                                                                            <td height="20">
                                                                                                <img height="5" src="images/but_01.gif" width="6"/></td>
                                                                                            <td>
                                                                                                <%#Eval("日期||班组||'从'||开始时间||轧厂事件类型||间隔||'分钟，原因是：'||记事")%>
                                                                                        
                                                                                            </td>
                                                                                           
                                                                                        </tr>
                                                                                    </ItemTemplate>
                                                                                </asp:Repeater>
                                                                            </tbody>
                                                                        </table></marquee>
                                                                        
</td>
</tr>
     </table>

 

可是因为要使用asp.net ajax中的CollapsiblePanelExtender实现折叠效果

使用了<div>,之后再加入上面的这段滚动代码，结果无法使用了。。

google之后才明白<marquee onmouseover="this.stop();" onmouseout="this.start();" scrollamount="3" scrolldelay="90"
                                                                        direction="up" height="200">

是不能使用在XHTML中的，marquee是不符合Web标准的（小弟才疏学浅，见笑了）

在XHTML代码中何用Marquee标记的技巧

http://www.yindaoxian.com/html/web/HTML_Xhtml-7169.html

 

改动后的代码如下；（正常使用）

HTML代码：

 

<div id="imageFlow" style="overflow: hidden; width: 650px; background-color: #EFFBEF; height: 130px">
    <table width="645" height="130" border="0" style="vertical-align: top" cellspacing="0" cellpadding="0" class="blogphototab">
              <tr>
                 <td id="demo1" align="left">
                <asp:Repeater ID="RepeaterPhotolist"  runat="server">
                <ItemTemplate>
                    
                    <img id="Img_<%# Eval("ImageID") %>" alt="" height="75" name="Img_<%# Eval("ImageID") %>"
                        
                        src="http://xbs.eee114.com/Uploadfile/xiangce/<%# Eval("ImageRoute") %>" width="92" />&nbsp;
                </ItemTemplate>
                </asp:Repeater>
                 </td>
                 <td id="demo2">
                 </td>

              </tr>
            </table>
            </div>
    <div id="bigImgDiv" style="display: none; z-index: 100; position: absolute;">
        <img height="100" id="bigImg" src="" width="120"/>
    </div>

 

 

 

var speed=20//速度数值越大速度越慢
  demo2.innerHTML=demo1.innerHTML
  function Marquee(){
  if(demo2.offsetWidth-imageFlow.scrollLeft<0)
  imageFlow.scrollLeft-=demo1.offsetWidth
  else{
  imageFlow.scrollLeft++
  }
  }
  var MyMar=setInterval(Marquee,speed)
  imageFlow.onmouseover=function() {clearInterval(MyMar)}
  imageFlow.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

 

注意：demo1，demo2，imageFlow三个标签的作用。

 

 

 

附加另外一种可实现自下而上循环滚动方案

HTML

<table width="300"  border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
       <td>
       <DIV id=marquees>
           <table width="300" border=0 cellpadding="1" cellSpacing=1 rules=all style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px">
 <tr class="tablectstyle">
    <td>B6365</td>
    <td> 2006-01-17 09:12:33 </td>
    <td> 电吹风 </td>
  </tr>
  <tr class="tablectstyle">
    <td>qsxt8815</td>
    <td> 2006-01-16 20:53:18 </td>
    <td> 电吹风 </td>
  </tr>
  <tr class="tablectstyle">
    <td>435266021</td>
    <td> 2006-01-16 20:38:13 </td>
     <td> 电热水壶 </td>
   </tr>
  <tr class="tablectstyle">
    <td>冰魂shmily</td>
     <td> 2006-01-16 19:50:56 </td>
    <td> 电磁炉 </td>
   </tr>
  <tr class="tablectstyle">
    <td>小君儿96</td>
    <td> 2006-01-16 19:13:32 </td>
    <td> 电吹风 </td>
   </tr>
           </table>
        </DIV>

JAVASCRIPT

<SCRIPT language=JavaScript>
marqueesHeight=130;
stopscroll=false;

with(marquees){
  style.width=0;
  style.height=marqueesHeight;
  style.overflowX="visible";
  style.overflowY="hidden";
  noWrap=true;
  onmouseover=new Function("stopscroll=true");
  onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');

preTop=0; currentTop=0; 

function init(){
  templayer.innerHTML="";
  while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
  }
  marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
   setInterval("scrollUp()",30);
}
document.body.onload=init;

function scrollUp(){
  if(stopscroll==true) return;
  preTop=marquees.scrollTop;
  marquees.scrollTop+=1;
  if(preTop==marquees.scrollTop){
    marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
    marquees.scrollTop+=1;
  }
}
  </SCRIPT>