首页上一页 1 下一页尾页 1 条记录 1/1页
javascript从入门到精通 P369无间断的图片滚动效果div宽度设置不明白
发表在JavaWeb图书答疑
2015-04-29
是否精华
是
否
版块置顶:
是
否
急急急!!!期待大神火速赶来,<div id="scrolldiv" style=" overflow:hidden;[font color=#FF0000] width:1000px;[/font] color:#ffffff;">
<table cellspacing="0" cellpadding="0" align="left" border="0" cellspace="0">
<tr>
<td id="td1" valign="top">
<table style="width:1000px; height:89px; border:0;" cellspacing="0" cellpadding="0">
<tr>
<td width="110px" height="89px" background="image/ (1).bmp"></td>
<td width="110px" height="89px" background="image/ (2).bmp"></td>
<td width="110px" height="89px" background="image/ (3).bmp"></td>
<td width="110px" height="89px" background="image/ (4).bmp"></td>
<td width="110px" height="89px" background="image/ (5).bmp"></td>
<td width="110px" height="89px" background="image/ (6).bmp"></td>
<td width="110px" height="89px" background="image/ (7).bmp"></td>
<td width="110px" height="89px" background="image/ (8).bmp"></td>
<td width="110px" height="89px" background="image/ (9).bmp"></td>
<td width="110px" height="89px" background="image/ (10).bmp"></td>
<td width="110px" height="89px" background="image/ (11).bmp"></td>
<td width="110px" height="89px" background="image/ (12).bmp"></td>
</tr>
</table>
</td>
<td id="td2" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var n=5;
td2.innerHTML=td1.innerHTML;
var myCheck;
//alert(td2.offsetWidth);
function move(){
if(td2.offsetWidth-scrolldiv.scrollLeft<=0){
//alert("ok");
scrolldiv.scrollLeft=0;
}else{
scrolldiv.scrollLeft++;
}
myCheck=setTimeout(move,n);
}
//alert(scrolldiv);
alert(td1.offsetWidth);
scrolldiv.onmouseover=function(){
clearTimeout(myCheck);
}
scrolldiv.onmouseout=function(){
myCheck=setTimeout(move,n);
}
</script>
其中div width设置成具体的像素值就能实现不间断的滚动,但是像书上写的那样width:100%就只能滚动一会,scrollLeft的最大值只能到667px;然后就不滚动了
<table cellspacing="0" cellpadding="0" align="left" border="0" cellspace="0">
<tr>
<td id="td1" valign="top">
<table style="width:1000px; height:89px; border:0;" cellspacing="0" cellpadding="0">
<tr>
<td width="110px" height="89px" background="image/ (1).bmp"></td>
<td width="110px" height="89px" background="image/ (2).bmp"></td>
<td width="110px" height="89px" background="image/ (3).bmp"></td>
<td width="110px" height="89px" background="image/ (4).bmp"></td>
<td width="110px" height="89px" background="image/ (5).bmp"></td>
<td width="110px" height="89px" background="image/ (6).bmp"></td>
<td width="110px" height="89px" background="image/ (7).bmp"></td>
<td width="110px" height="89px" background="image/ (8).bmp"></td>
<td width="110px" height="89px" background="image/ (9).bmp"></td>
<td width="110px" height="89px" background="image/ (10).bmp"></td>
<td width="110px" height="89px" background="image/ (11).bmp"></td>
<td width="110px" height="89px" background="image/ (12).bmp"></td>
</tr>
</table>
</td>
<td id="td2" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var n=5;
td2.innerHTML=td1.innerHTML;
var myCheck;
//alert(td2.offsetWidth);
function move(){
if(td2.offsetWidth-scrolldiv.scrollLeft<=0){
//alert("ok");
scrolldiv.scrollLeft=0;
}else{
scrolldiv.scrollLeft++;
}
myCheck=setTimeout(move,n);
}
//alert(scrolldiv);
alert(td1.offsetWidth);
scrolldiv.onmouseover=function(){
clearTimeout(myCheck);
}
scrolldiv.onmouseout=function(){
myCheck=setTimeout(move,n);
}
</script>
其中div width设置成具体的像素值就能实现不间断的滚动,但是像书上写的那样width:100%就只能滚动一会,scrollLeft的最大值只能到667px;然后就不滚动了