求javascript写一个方块或图片沿窗体做矩形运动的代码


答案：用 jQuery 给你写了一个，保存成 html 文件用浏览器打开即可看到效果。
  
如果 http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js 不能打开，自己下一个 jquery，然后修改一下路径。
  
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>移动方块</title>
 <style type="text/css">
 html, body {
  width: 100%;
  height: 100%;
 }
 #box {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #FF0;
  border: 1px solid #F00;
 }
 #fig {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 200px;
  background: #E4F2FF;
  border: 1px solid #B1C6D9;
 }
 </style>
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
  var $fig = $('#fig');
  var $box = $('#box');
  
 var P = $fig.position();
  var M = 2;
  var L = P.left - $box.width() - M;
  var T = P.top - $box.height() - M;
  var R = P.left + $fig.width() + M;
  var B = P.top + $fig.height() + M;
  
 var left = L;
  var top = T;
  
 $box.css('left', left);
  $box.css('top', top);
  
 var status = 0;
  var STEP = 5;
  setInterval(function() {
   switch(status) {
    case 0:
  
if(left < R) {
  
 left += STEP;
  
 if(left > R) left = R;
  
 $box.css('left', left);
  
} else {
  
 status = 1;
  
} 
    break;
    case 1:
  
if(top < B) {
  
 top += STEP;
  
 if(top > B) top = B;
  
 $box.css('top', top);
  
}  else {
  
 status = 2;
  
} 
    break;
    case 2:
  
if(left > L) {
  
 left -= STEP;
  
 if(left < L) left = L;
  
 $box.css('left', left);
  
}  else {
  
 status = 3;
  
} 
    break;
    case 3:
  
if(top > T) {
  
 top -= STEP;
  
 if(top < T) top = T;
  
 $box.css('top', top);
  
} else {
  
 status = 0;
  
} 
    break;
    default: break;
   }
  }, 100);
 });
 </script>
 </head>
 <body>
 <div id="box"></div>
 <div id="fig"></div>
 </body>
 </html>

上一个：来帮我这看看这个很简单的JavaScript的问题谢谢！！！
下一个：javascript中如何用函数将函数值传如文本匡啊

更多图片编程知识: