javaScript的漂浮图片


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档 </title> 
<script language="javascript" defer> 
 var xPos=0; 
 var yPos=0; 
 var step=1; 
 var yon=0; 
 var xon=0; 
 img=document.getElementById("float"); 
 function changPos(){
   var width=document.body.clientWidth;
   var height=document.body.clientHeight; 
   var Hoffset=img.offsetHeight; 
   var Woffset=img.offsetWidth; 
      img.style.left=xPos+document.body.scrollLeft; 
      img.style.top=yPos+document.body.scrollTop; 
  if(yon==0){ 
   yPos=yPos+step; 
  }else{ 
   yPos=yPos-step; 
  } 
  if(yPos <0){ 
   yon=0; 
   yPos=0; 
  } 
  if(yPos>=(height-Hoffset)){ 
   yon=1; 
   yPos=(height-Hoffset); 
  } 
  if(xon==0){ 
   xPos=xPos+step; 
  }else{ 
   xPos=xPos-step; 
  } 
  if(xPos <0){ 
   xon=0; 
   xPos=0; 
  } 
  if(xPos>=(width-Woffset)){ 
   xon=1; 
   xPos=(width-Woffset); 
  } 
 setTimeout("changPos()",30); 
 } 
</script> 
</head> <body onload=changPos()> 
     <div id="float" style="position:absolute;width:80px; height::80px;top:auto; left:auto;      z-index:1"> 
    <img width="80px" height="80px" src="1.jpg"/> 
   </div> 
   <img src="5.jpg" width="1024px" height="768px"> </body> 
</html>

解决方案 »

  1.   


    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>无标题文档 </title> 
    <script language="javascript"> 
    var xPos=0; 
    var yPos=0; 
    var step=1; 
    var yon=0; 
    var xon=0;
    var tid = null;
    function changPos(){ 
       var img=document.getElementById("float"); 
       var width=document.body.clientWidth; 
       var height=document.body.clientHeight; 
       var Hoffset=img.offsetHeight; 
       var Woffset=img.offsetWidth; 
       img.style.left=xPos+document.body.scrollLeft; 
       img.style.top=yPos+document.body.scrollTop; 
      if(yon==0){ 
       yPos=yPos+step; 
      }else{ 
       yPos=yPos-step; 
      } 
      if(yPos <0){ 
       yon=0; 
       yPos=0; 
      } 
      if(yPos>=(height-Hoffset)){ 
       yon=1; 
       yPos=(height-Hoffset); 
      } 
      if(xon==0){ 
       xPos=xPos+step; 
      }else{ 
       xPos=xPos-step; 
      } 
      if(xPos <0){ 
       xon=0; 
       xPos=0; 
      } 
      if(xPos>=(width-Woffset)){ 
       xon=1; 
       xPos=(width-Woffset); 
      } 
      if(tid) clearTimeout(tid);
      tid = setTimeout("changPos()",30); 
     } 
    window.onload=changPos; 
    </script> 
    </head> <body> 
         <div id="float" style="position:absolute;width:80px; height::80px;top:auto; left:auto;      z-index:1"> 
        <img width="80px" height="80px" src="1.jpg"/> 
       </div> 
       <img src="5.jpg" width="1024px" height="768px"> </body> 
    </html>
      

  2.   

    我怎么就没有看出来错在那里啊，
    这句是我写错的setTimeout(:changPos():,30); 
    但绝对不是这句的原因
      

  3.   

    但我把这个window.onload=changPos()后面的括号去掉的时候，
    这两句有报错
    var Hoffset=img.offsetHeight; 
    var Woffset=img.offsetWidth; 
      

  4.   

    这句换到方法里面和外面有什么区别啊
    var img=document.getElementById("float"); 
      

  5.   

    运行的时候要确保 img已经加载了
    不放在前面的话，用<script defer="true">