弹弹

2017-12-18 18:38:16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Demo</title>
  <style type="text/css">
   *{margin:0;padding:0;} 
  </style>
  <script src="./jquery.js"></script>
  <script type="text/javascript" charset="utf-8">
   $(function(){
    var pw=$(window).width();
    var ph=$(window).height();
    var w=pw-50;
    var h=ph-50;
    var tn=1;
    var ln=1;
    var t=0;
    var l=0;

    setInterval(function(){
     t+=tn;
     l+=ln;
     if(t>=h){
      tn*=-1;
     }

     if(l>=w){
      ln*=-1;
     }

     if(t<=0){
      tn*=-1;
     }

     if(l<=0){
      ln*=-1;
     }

     $('#did').offset({top:t,left:l});
    },10);
   });
  </script>
</head>
<body>
  <div id="did" style="width:50px;height:50px;background:green;position:relative;top:10px;left:10px;"></div>
 </body>
</html>