移动浮动图片时如何确定可以看见的页面宽度？

 if(xPos <=0 ¦ ¦ xPos+float_icon.offsetWidth>=document.body.clientWidth) 
        xPos -= dirX; 
      
      if(yPos <=0 ¦ ¦ yPos+float_icon.offsetHeight>=document.body.clientWidth) 
        yPos -= dirY; 

解决方案 »

  1.   

    非常感谢jacklinchen 的回帖，不过好像更不对了，图片干脆不往回弹了。我原来的代码在加载页面后还正常，基本上可以在可以看见的范围内回弹，但在改变窗口大小后就不对了。不知那们高手有这方面的经验，还望给以指点，谢谢！
      

  2.   


     
          if(yPos <=0 || yPos+float_icon.offsetHeight>=document.body.clientHeight) //马虎的问题height不是width
            dirY = -dirY; 
      

  3.   

    改了下:
    function moveIcon() 
        { 
          xPos += dirX; 
          yPos += dirY; 
          
          float_icon.style.top = yPos+'px'; 
          float_icon.style.left = xPos+'px'; 

       if((yPos+float_icon.offsetHeight)>document.body.clientHeight) yPos = document.body.clientHeight - float_icon.offsetHeight;
       if((xPos+float_icon.offsetWidth)>document.body.clientWidth) xPos = document.body.clientWidth - float_icon.offsetWidth;
       if(yPos<0) yPos =0;
       if(xPos<0) xPos = 0;
          
          // 觉得这样更合理
          if(yPos <=0 || yPos+float_icon.offsetHeight>=document.body.clientHeight || xPos <=0 || xPos+float_icon.offsetWidth>=document.body.clientWidth){
    dirX = -dirX;
        dirY = -dirY;
       }
                 
        }
      

  4.   

    谢谢liangchao1s 与cgisir 两位朋友的回复，
    但是问题还是没有得以解决。
    还望各位给以帮助，谢谢了！
      

  5.   

    <html > 
    <head runat="server"> 
        <title>无标题页 </title> 
        <style> 
        #mainForm 
        { 
          background-color:#aFCFaF; 
        } 
        #float_icon 
        { 
        width:120px;height:140px; 
        visibility:visible;position:absolute;left:0;TOP=0; 
        } 
        #tenYearsClose    { 
        font-size:12px;font-family:宋体;text-align:center; 
        } 
        </style> 
        <script type="text/javascript"> 
        
        function adClose() 
        { 
          float_icon.style.visibility = "hidden"; 
            clearInterval(MyFloating); 
        } 
        var dirX=2,dirY=2; 
        var xPos = 0, yPos = 0; 
        
        //该函数用于移动浮动图片 
        function moveIcon() 
        { 
          xPos += dirX; 
          yPos += dirY; 
          
          float_icon.style.top = yPos; 
          float_icon.style.left = xPos; 
                if(xPos <=0 || xPos+float_icon.offsetWidth>=document.body.clientWidth) 
            dirX = -dirX; 
          
          if(yPos <=0 || yPos+float_icon.offsetHeight>=document.body.clientHeight) 
            dirY = -dirY; 
          
        } 
        
        function FloatingStop() 
        { 
            clearInterval(MyFloating); 
        } 
        function FloatingStart() 
        { 
            MyFloating=setInterval("moveIcon()",10); 
        } 
        
        FloatingStart(); 
        </script> 
    </head> 
    <body style="text-align:center"> 
        <form id="form1" runat="server"> 
            <div id="float_icon" onMouseOver="FloatingStop();" onMouseOut="FloatingStart();" > 
                <div id="tenYearsImg"> 
                    <a href="ADPages/10Years.aspx" target="_blank"> 
                        <img src="images/10year.jpg" /> 
                    </a> 
                </div> 
                <div id="tenYearsClose"> 
                    <a href="#" onclick="adClose()">关闭 </a> 
                </div> 
            </div> 
            <div id="mainForm" style="width: 500px; height: 700px;"> 
                <input id="inp" type="button" value="input" " /> 
            </div> 
        </form> 
    </body> 
    </html> 我ie6测试通过了阿
      

  6.   


    谢谢上面各位的支持，将上面代码保存为html文件时，运行结果的确是对的。但我是用vs2005，文件格式为aspx。这时，运行结果将会出错。稍后，我将散分，并将该问题在asp.net版块重新提问，了解的朋友还望能再次给以帮助，在这里先谢过大家了！
      

  7.   

    标准下使用
    document.documentElement.clientWidth
    非标准下使用
    document.body.clientWidth
      

  8.   


    新提问的帖子地址为：http://topic.csdn.net/u/20080711/11/da947439-985a-4cca-b149-2c3520647f0d.html
      

  9.   

    谢谢wllllll ,问题解决，先给wllllll２０分，其余分请来asp.net版块接分，那里还有80分。