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;然后就不滚动了
分享到:
精彩评论 1
铁游夏
学分:0 LV1
TA的每日心情
还糊涂
2020-10-22 13:46:07
2015-04-29
沙发
请问你在运行时用的是什么浏览器,这个实例的代码在IE浏览器下运行是没有问题的。
首页上一页 1 下一页尾页 1 条记录 1/1页
手机同步功能介绍
友情提示:以下图书配套资源能够实现手机同步功能
明日微信公众号
明日之星 明日之星编程特训营
客服热线(每日9:00-17:00)
400 675 1066
mingrisoft@mingrisoft.com
吉林省明日科技有限公司Copyright ©2007-2022,mingrisoft.com, All Rights Reserved长春市北湖科技开发区盛北大街3333号长春北湖科技园项目一期A10号楼四、五层
吉ICP备10002740号-2吉公网安备22010202000132经营性网站备案信息 营业执照