js 实现图片的不间断滚动中的div width值设置疑点
急急急!!!期待大神火速赶来,<div id="scrolldiv" style=" overflow:hidden; width:1000px; 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;然后就不滚动了
...全文
相关推荐
JS实现div内部的文字或图片自动循环滚动代码
在某些情况下需要这样的功能:使用JS实现div内部的文字或图片自动循环滚动,接下来为大家详细介绍下实现方法,感兴趣的朋友可以参考下哈
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
下面小编就为大家带来一篇让DIV的滚动条自动滚动到最底部的3种方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
下面小编就为大家带来一篇用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
DIV+CSS实现横向无缝图片滚动效果
NULL 博文链接:https://javacunyin.iteye.com/blog/682776
js解决div内图片自适应大小
纯js实现在img图片大小未知,div大小未知的情况下,让图片自适应大小,需要的朋友可以参考下 已测试,兼容火狐,谷歌,IE6,IE7/8


