无缝隙的滚动，不能滚动

Question

  <DIV id=demo style="LEFT: 8px; OVERFLOW: hidden; WIDTH: 630px; POSITION: relative; HEIGHT: 140px"  align=center><!--滚动区的高度和宽度-->
                                <TABLE cellPadding=0 align=center border=0  cellspacing="0">
                                <TBODY>
                                <TR>
                                <TD id=demo1 vAlign=top>
                                 <asp:DataList ID="DLnewproducts" runat="server" RepeatColumns="5" Width="700px">
                                    <ItemTemplate>
                                     <table border="0" cellpadding="4" cellspacing="4">
                                         <tr>
                                           <td align="center" style="border-right: #c0c0c0 1px solid; border-top: #c0c0c0 1px solid;
                                            border-left: #c0c0c0 1px solid; border-bottom: #c0c0c0 1px solid; height: 105px"
                                            width="140">
                                            <a href='<%#"images/Produts/"+DataBinder.Eval(Container.DataItem,"S_M_Content").ToString()+"/"+ DataBinder.Eval(Container.DataItem,"P_Pricture") %>'
                                                rel="lightbox[Produts]" title='<%# DataBinder.Eval(Container.DataItem,"P_Title") %>'>
                                                <span onmousemove="showDiv('Produts_<%#Container.ItemIndex+1 %>',1)" onmouseout="showDiv('Produts_<%#Container.ItemIndex+1 %>',0)">
                                                    <asp:Image ID="Imgpricture" runat="server" AlternateText='<%# DataBinder.Eval(Container.DataItem,"P_Title") %>'
                                                        Height="105px" ImageUrl='<%#"~/images/Produts/"+DataBinder.Eval(Container.DataItem,"S_M_Content").ToString()+"/"+ DataBinder.Eval(Container.DataItem,"P_Pricture") %>'
                                                        Width="140px" /></span></a><br />
                                            <%# DataBinder.Eval(Container.DataItem,"P_Title") %>
                                            <div id="Produts_<%#Container.ItemIndex+1 %>" class="Memo"><%# DataBinder.Eval(Container.DataItem,"P_Title") %>
                                            </div>
                                        </td>
                                         </tr>
                                       </table>
                                    </ItemTemplate>
                                 </asp:DataList>   
                                </TD>  
                                <TD id=demo2 vAlign=top></TD></TR>
                                </TBODY>
                                </TABLE>
                                </DIV>
                                <SCRIPT>
                                    var Picspeed=10
                                    demo2.innerHTML=demo1.innerHTML
                                    function Marquee1(){
                                    if(demo2.offsetWidth-demo.scrollLeft<=0)
                                    demo.scrollLeft-=demo1.offsetWidth
                                    else{
                                    demo.scrollLeft++
                                    }
                                    }
                                    var MyMar1=setInterval(Marquee1,Picspeed)
                                    demo.onmouseover=function() {clearInterval(MyMar1)}
                                    demo.onmouseout=function() {MyMar1=setInterval(Marquee1,Picspeed)}
                               </SCRIPT>   我用上面的代码实现无缝隙滚动，就是不能滚动。
那位高手可以指点下

Answer 1

document.getElementById 你用这个方法获取id,还有这个代码太烂了....还有怎么能放在td里呢??两个div<div id="demo1"></div><div id="demo2"></div>放td里应该滚不了....

Answer 2

OVERFLOW: hidden改为OVERFLOW: auto

Answer 3

var base={
$:function(id){return document.getElementById(id)}
,tagsArr:function(o,name){return o.getElementsByTagName(name)}
,rewriteAtt:function(formerObj,newObj){//给对象设置属性
for(var i in newObj){
formerObj[i]=newObj[i];
}
return formerObj;
}
,offsetWH:function(o){
return {'w':o.offsetWidth,'h':o.offsetHeight};
}
,repeatHtml:function(text,num){
var str='',i;
for(i=0;i<num;i++){
str+=text;
}
return str;
}
}
var marquee={};
//无缝滚动
marquee.seamless=function(newObj){
this.base=base;this.n=1;this.speed=50;
var pro=this;
pro=this.base.rewriteAtt(pro,newObj);
this.show();
this.obj.onmouseover=function(){
clearTimeout(pro.loop);
}
this.obj.onmouseout=function(){
pro.play();
}
};
marquee.seamless.prototype={
moveType:{left:'scrollLeft',top:'scrollTop'}
,size:{left:'w',top:'h'}
,loop:null
,show:function(){
if(!this.moveType[this.type]){return;}
var WH=this.base.offsetWH(this.obj),thisWH=this.base.offsetWH(this.divObj);
var sizeType=this.size[this.type];
var n=parseInt((WH[sizeType]*2+thisWH[sizeType])/thisWH[sizeType]);
this.divObj.style.width=thisWH.w+'px';
this.divObj.style.height=thisWH.h+'px';
this.len=(this.type=='left')?thisWH.w:thisWH.h;
var templet=this.obj.innerHTML;
var str=(this.type=='left')?'<div style="width:'+thisWH.w*n+'px;">{@templet@}</div>':'{@templet@}';
this.obj.innerHTML=str.replace('{@templet@}',this.base.repeatHtml(templet,n==1?n+1:n));
this.play();
}
,play:function(){
var obj=this.obj,pro=this,moveType=this.moveType[this.type];
if(obj[moveType]>=this.len){
obj[moveType]=obj[moveType]-this.len;
}
obj[moveType]+=this.n;
this.loop=setTimeout(function(){pro.play()},this.speed);
}
}marquee.clickRoll=function(newObj){
this.base=base;this.n=10;this.speed=10;
var pro=this;
pro=this.base.rewriteAtt(pro,newObj);
var WH=this.base.offsetWH(this.subObj);
var ari=WH[this.size[this.type]]%this.length;
var len=WH[this.size[this.type]]-ari+(ari?this.length:0);
this.num=len/this.length-1;
this.subObj.style[this.stWH[this.type]]=len+'px';
};
marquee.clickRoll.prototype={
loop:null,onOff:true,thisNum:0
,moveType:{left:'scrollLeft',top:'scrollTop'}
,size:{left:'w',top:'h'}
,stWH:{left:'width',top:'height'}
,move:function(type){
if(!this.onOff){return;}
this.thisNum+=type;
this.thisNum=this.thisNum<this.num?(this.thisNum>0?this.thisNum:0):this.num;
this.play();
this.onOff=false;
if(this.thisNum==0 || this.thisNum==this.num){
this.onOff=true;return;
}
}
,play:function(){
var pro=this,obj=this.obj;
var len=this.thisNum*this.length,type=this.moveType[this.type];
if(len==obj[type]){
obj[type]=len;
clearTimeout(this.loop);
this.onOff=true;return;
}
var sp=(len-obj[type])*0.01*this.n;
sp=(sp>0)?(sp>1?sp:1):(sp<-1?sp:-1);
obj[type]+=sp;
this.loop=setTimeout(function(){pro.play();},this.speed);
}
}<!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=gb2312" />
<title>跑马灯-无缝滚动</title>
<script type="text/javascript" src="marquee.js"></script>
<script type="text/javascript"></script>
<style type="text/css">
*{font:"宋体"; font-size:12px; color:#000}
body,ul{ margin:0px; padding:0px;}
li{list-style:none}
a:link,a:visited,a:active,a:hover{font:"宋体"; font-size:12px; color:#000;text-decoration:none}
a:hover{ color:#f00; }
img{border:none;}
</style>
</head><body>
<div id="demo" style="overflow:hidden;width:120px;height:200px;color:#ffffff;float:left;margin:10px 0 0 10px;"> 
<div style="float:left;">
<a href="http://www.bitauto.com"><img src="images/01.jpg" width="100" height="100"/></a>
</div>
</div> 
<script type="text/javascript"> 
new marquee.seamless({
obj:base.$('demo')
,divObj:base.tagsArr(base.$('demo'),'div')[0]
,n:2
,type:'top'
});
</script><div id="demo3" style="overflow:hidden;width:200px;height:20px;color:#ffffff;margin-top:50px;float:left;"> 
<div style="width:200px;">
<a href="http://www.bitauto.com">跑马灯类</a>
<a href="http://www.bitauto.com">跑马灯类2</a>
<a href="http://www.bitauto.com">跑马灯类3</a>
<a href="http://www.bitauto.com">跑马灯类4</a>
</div>
</div> 
<script type="text/javascript"> 
new marquee.seamless({
obj:base.$('demo3')
,divObj:base.tagsArr(base.$('demo3'),'div')[0]
,n:5
,type:'top'
});
</script><div id="demo4" style="overflow:hidden;width:120px;height:20px;color:#ffffff;margin-top:50px;float:left;"> 
<div style="float:left;white-space:nowrap;">
<a href="http://www.bitauto.com">跑马灯类</a>
<a href="http://www.bitauto.com">跑马灯类2</a>
<a href="http://www.bitauto.com">跑马灯类3</a>
<a href="http://www.bitauto.com">跑马灯类4</a>
</div>
</div> 
<script type="text/javascript"> 
new marquee.seamless({
obj:base.$('demo4')
,divObj:base.tagsArr(base.$('demo4'),'div')[0]
,n:10
,type:'left'
});
</script><div id="demo2"  style="overflow:hidden;width:300px;height:120px;color:#ffffff;margin-top:50px;float:left;"> 
<div style="float:left;white-space:nowrap;">
<a href="http://www.bitauto.com"><img src="images/01.jpg" width="100" height="100"/></a>
<a href="http://www.bitauto.com"><img src="images/02.jpg" width="100" height="100"/></a>
<a href="http://www.bitauto.com"><img src="images/03.jpg" width="100" height="100"/></a>
<a href="http://www.bitauto.com"><img src="images/04.jpg" width="100" height="100"/></a>
<a href="http://www.bitauto.com"><img src="images/05.jpg" width="100" height="100"/></a>
</div>
</div> 
<script type="text/javascript"> 
new marquee.seamless({
obj:base.$('demo2')
,divObj:base.tagsArr(base.$('demo2'),'div')[0]
,n:2
,speed:10
,type:'left'
});
</script>
</body>
</html>

Answer 4

至少布局用div的，尽量不要像你现在这么写即使不要求兼容性，你也不该用 id.属性 这样的方案，非常的不好。

Answer 5

  寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz 寻找  jxyxhz
http://topic.csdn.net/u/20091024/16/8fcfff69-865a-4450-916b-2c14242eaaa5.html?59312
进来接着你这个问题啊