PHP 相片移动问题

大虾们，你们好！
    小弟刚学习PHP不久，在实现图片按照指定的路径运动功能是遇到问题，请各个大虾帮帮小弟！
问题：本是想实现图片按照指定路径运动，当碰到边框时会自动反弹，但是结果是图片碰到边框还是继续前进！
源代码如下：
<html>
  <head>
    <title>沿指定路径运动的图片</title>
  </head>
    <script language="JavaScript">
    var win_width,win_height,img_left,img_top;
    var x_flag=0,y_flag=0;
    var x_step=2,y_step=1;
    var scroll_x; //页面在水平方向上已经滚动的距离
    var scroll_y;  //页面在竖直方向上已经滚动的距离
    
    function do_move()
    {
      scroll_x=id_body.scrollLeft;
      scroll_y=id_body.scrollTop;
      win_width=window.innerWidth?window.innerWidth:id_body.clientWidth;
      win_height=window.innerHeight?window.innerHeight:id_body.clientHeight;
      var img=document.getElementById("div_img");
      
      img_left=parseInt(img.style.left);
      img_top=parseInt(img.style.top);
      //===图片移动的左边界为2
      if(img_left<=scroll_x+2)
         x_flag=1;
      //===图片移动的右边界为win_width-moving_pic.width-2
      if(img_left>=scroll_x+win_width-moving_pic.width-2);
         x_flag=-1;
      //===图片移动的顶边界为2
      if(img_top<=scroll_y+2)
         y_flag=1;
      //===图片移动的底边界为win_height-moving_pic.width-2
      if(img_top>=scroll_y+win_height-moving_pic.width-2);
         y_flag=-1;
      //===移动图片
      img.style.left=img_left+x_flag*x_step;
      img.style.top=img_top+y_flag*y_step;
      setTimeout("do_move()",50);
    }
    </script>
  <body onload="do_move()" id="id_body">
    <div id="div_img" style="position:absolute;left:0px;top:0px;z-index:2">
      <a href="http://www.dgut.edu.cn/">
      <img id="moving_pic" border="0" src="../JavaScript/11.jpg" width="100px">
      </a>
    </div>
    <table height="700px" width="300px" align="center">
      <tr height="200px"><td></td></tr>
      <tr height='21px'>
        <td align="center">九寨沟简介</td>
      </tr>
      <tr height='21px'>
        <td>
          九寨沟，位于四川省北部南坪县境内，是一条纵深40余公里的山沟谷底，因周围有9个藏族村寨而得名，
          总面积约620平方公里，自然景色兼有湖泊、瀑布、雪山、森林之美。
        <br>沟中地僻人稀，景物特异，富于原始自然风貌，有“童话世界”之誉。河谷地带有大小湖泊100多处，其中
        “五花海”，湖底为沉积石，色彩斑斓，在阳光照射下，呈现出缤纷色彩。诺日朗瀑布，高约30米，宽约百米，
        1992年12月九寨沟作为自然遗产被列入《世界遗产名录》.
        </td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
  </body>
</html>

解决方案 »

  1.   

    ~这是js的东西，和php没啥关系。
      

  2.   

    <html>
      <head>
      <title>沿指定路径运动的图片</title>
      </head>
      <script language="JavaScript">
      var img_left,img_top;
      var x_flag=0,y_flag=0;
      var x_step=2,y_step=1;
       
    function do_move() {
      
    var img=document.getElementById("div_img");  
    img_left=parseInt(img.style.left);
    img_top=parseInt(img.style.top); if(img_left<2) {

    x_flag=1;
    img_left = 0;
    } if(img_left>=50) { x_flag=-1;
    img_left = 50;
    }
    if(img_top<0) {

    y_flag=1;
    img_top = 0;
    } if(img_top>=50) { y_flag=-1;
    img_top = 50;
    } img.style.left=img_left+x_flag*x_step;
    img.style.top=img_top+y_flag*y_step;
    setTimeout("do_move()",50);
    }
      </script>
      <body onload="do_move()" id="id_body">
      <div id="div_img" style="position:absolute;left:50px;top:50px;z-index:2;border:1px solid red;">
      <a href="http://www.dgut.edu.cn/">
    <img id="moving_pic" border="0" src="11.jpg" width="100px">
      </a>
      </div>
      </body>
    </html>
      

  3.   

    ff3,ie7
    <html>
      <head>
      <title>沿指定路径运动的图片</title>
      </head>
      <script language="JavaScript">
      var win_width,win_height,img_left,img_top;
      var x_flag=0,y_flag=2;
      var x_step=2,y_step=2;
      var scroll_x; //页面在水平方向上已经滚动的距离
      var scroll_y; //页面在竖直方向上已经滚动的距离
       
      function do_move()
      {
      scroll_x=id_body.scrollLeft;
      scroll_y=id_body.scrollTop;
      win_width=window.innerWidth?window.innerWidth:id_body.clientWidth;
      win_height=window.innerHeight?window.innerHeight:id_body.clientHeight;
      var img=document.getElementById("div_img");
       
      img_left=parseInt(img.style.left);
      img_top=parseInt(img.style.top);
      //===图片移动的左边界为2
      if(img_left<=scroll_x)
      {    x_flag = 1;
       x_step  = 2;
      }
      //===图片移动的右边界为win_width-moving_pic.width-2
      if(img_left>=scroll_x+win_width-moving_pic.width)
      {
       x_flag = 2;
       x_step = -1;
      }
      //===图片移动的顶边界为2
      if(img_top <= scroll_y)
      {
       y_flag = 1;
       y_step = 2;
      }
      //===图片移动的底边界为win_height-moving_pic.width-2
      if(img_top>=scroll_y+win_height-moving_pic.width)
      {
       y_flag = 2;
       y_step = -1;
      }
      //===移动图片
      img.style.left=img_left+x_flag*x_step;
      img.style.top=img_top+y_flag*y_step;
      setTimeout("do_move()",1);
      }
      </script>
      <body onload="do_move()" id="id_body">
      <div id="div_img" style="position:absolute;left:0px;top:0px;z-index:2">
      <a href="http://www.dgut.edu.cn/">
      <img id="moving_pic" border="0" src="http://avatar.profile.csdn.net/8/2/B/2_shangqiuzuidong.jpg" width="100px">
      </a>
      </div>
      <table height="700px" width="300px" align="center">
      <tr height="200px"><td></td></tr>
      <tr height='21px'>
      <td align="center">九寨沟简介</td>
      </tr>
      <tr height='21px'>
      <td>
      九寨沟，位于四川省北部南坪县境内，是一条纵深40余公里的山沟谷底，因周围有9个藏族村寨而得名，
      总面积约620平方公里，自然景色兼有湖泊、瀑布、雪山、森林之美。
      <br>沟中地僻人稀，景物特异，富于原始自然风貌，有“童话世界”之誉。河谷地带有大小湖泊100多处，其中
      “五花海”，湖底为沉积石，色彩斑斓，在阳光照射下，呈现出缤纷色彩。诺日朗瀑布，高约30米，宽约百米，
      1992年12月九寨沟作为自然遗产被列入《世界遗产名录》.
      </td>
      </tr>
      <tr>
      <td>&nbsp;</td>
      </tr>
      </table>
      </body>
    </html>
      

  4.   

    自己写的，楼主可以 参考   小试图预览+拖动+键盘(回车键做自由落体) 打开刷新一下 引入了 jquery 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    </head>
    <body style="overflow-x:hidden;">
    <div id="text" style="width:120px;height:60px;background:#F06;position:absolute;left:500px;top:90px;cursor:move;">

    </div>
    <script type="text/javascript">
    var msgObj = document.getElementById('text');
    var posx = 0;
    var posy = 0;
    var moveable = false;
    var MouseDownEvent = document.onmousedown;
    var MouseMoveEvent = document.onmousemove;
    var MouseUpEvent = document.onmouseup;
    msgObj.onmousedown = function(evt) {
    var evt = evt||window.event;
    moveable = true; 
    posy = evt.clientY-parseInt(msgObj.style.top);
    posx = evt.clientX-parseInt(msgObj.style.left);
    document.onmousemove = function(evt) {
    if (moveable) {
    var evt = evt||window.event;
    msgObj.style.left = evt.clientX - posx + "px";
    msgObj.style.top = evt.clientY - posy + "px";
    }
    change();
    };
    document.onmouseup = function () { 
    if (moveable) { 
    document.onmousemove = MouseMoveEvent;
    document.onmouseup = MouseUpEvent;
    moveable = false; 
    posx = 0;
    posy = 0;
    } 
    };
    }
    var v=1;
    var a=0.9;
    var h=document.documentElement.clientHeight;
    function scroll(){
    var timer=setInterval(function(){
    v +=a;
    var top=(parseInt(msgObj.style.top)||0);
    if(top+v>h-70){
    if(v<2)clearInterval(timer);
    msgObj.style.top=h-70+"px";
    v=-v*0.5;
    }else{
    msgObj.style.top=top+v+"px";
    }
    change();
    },10);
    };
    $(document).keyup(function(e){
    var e = e || window.event ;
    if(e.which == 13){
    scroll();
    }
    })
    var x = 4 ;
    var y = 4 ;
    function newpro(){
    var Height = document.documentElement.clientHeight ;
    var Width = document.documentElement.clientWidth ;
    var newobj = document.createElement('div');
    newobj.setAttribute('id','bigbox');
    newobj.style.position = 'absolute';
    newobj.style.left = 20 +"px";
    newobj.style.top = 30 +"px";
    newobj.style.height = Height/x +"px" ;
    newobj.style.width = Width/y +"px" ;
    newobj.style.borderWidth = 1+"px";
    newobj.style.borderColor = "#ff6500";
    newobj.style.borderStyle = 'solid' ;
    newobj.innerHTML='<div id="minbox"></div>';
    document.body.appendChild(newobj);
    change();
    }
    function change(){
    var minobj = document.getElementById('minbox');
    minobj.style.position = 'absolute';
    minobj.style.left = parseInt(msgObj.style.left)/x +"px";
    minobj.style.top = parseInt(msgObj.style.top)/y +"px";
    minobj.style.height = 20 +"px" ;
    minobj.style.width = 30 +"px" ;
    minobj.style.background = "#F06";
    }
    window.onload = function(){
    newpro();
    }
    </script>
    </body>
    </html>