Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

  • 博客访问： 961943
  • 博文数量： 210
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2070
  • 用 户 组： 普通用户
  • 注册时间： 2014-11-19 21:54
文章分类

全部博文（210）

文章存档

2020年（2）

2019年（18）

2018年（27）

2017年（5）

2016年（53）

2015年（88）

2014年（17）

我的朋友
最近访客
推荐博文
JavaScript小球墙壁反弹制作

分类： JavaScript

2016-08-11 08:36:25



点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>moveBox 移动的盒子</title>
  6.         <style type="text/css">
  7.         *{
  8.             margin:0;
  9.             padding: 0;;
  10.         }
  11.             #father{
  12.                 width: 600px;
  13.                 height: 400px;
  14.                 border:1px solid black;
  15.                 margin: 0 auto;
  16.                 background: bisque;
  17.                 
  18.                 
  19.             }
  20.             #son{
  21.                 width: 50px;
  22.                 height: 50px;
  23.                 border-radius: 100px;
  24.                 background:yellow ;
  25.             }
  26.         </style>
  27.     </head>
  28.     <body>
  29.         <div id="father">
  30.             <div id="son">
  31.                 
  32.                 
  33.                 <script type="text/javascript">
  34.                     //获取父标签father、
  35.                     var Father = document.getElementById("father");
  36.                     console.log(Father);
  37.                     //获取子标签son
  38.                     var Son = document.getElementById("son");
  39.                     console.log(Son);
  40.                     //获取父级Father的内容宽度和高度
  41.                     var FatherWidth = Father.clientWidth;
  42.                     var FatherHeight =Father.clientHeight;
  43.                     //获取字迹son自身的高宽
  44.                     var SonWidth = Son.offsetWidth;
  45.                     var SonHeight = Son.offsetHeight;
  46.                     //获取宽高边界条件
  47.                     var Maxwidth = FatherWidth - SonWidth;
  48.                     var MaxHeight = FatherHeight -SonHeight;
  49.                     var a = SonWidth;
  50.                     var b = SonHeight;
  51.                     var x=0;
  52.                     var y=0;
  53.                     function Boxmove(){
  54.                     //小球在x轴上的向右移动，
  55.                     if(x == 0){
  56.                         if(a<Maxwidth){
  57.                             a++;
  58.                             son.style.marginLeft= a+'px';
  59.                         }else{
  60.                             x=1;
  61.                         }
  62.                     }
  63.                       //小球在x轴上的向左移动，
  64.                     if( x == 1){
  65.                         if(a>0){
  66.                             a--;
  67.                             son.style.marginLeft = a+'px';
  68.                         }else{
  69.                             x=0;
  70.                         }
  71.                     }
  72.                       //小球在xy轴上的向下移动，
  73.                     if(y == 0){
  74.                         if( b< MaxHeight){
  75.                             b++;
  76.                             son.style.marginTop= b+'px';
  77.                         }else{
  78.                             y = 1;
  79.                         }
  80.                     }
  81.                   //小球在y轴上的向上移动，
  82.                     if(y == 1){
  83.                         if(b>0){
  84.                             b--;
  85.                             son.style.marginTop=b+'px';
  86.                         }else{
  87.                             y = 0;
  88.                         }
  89.                     }
  90.                 }
  91.                     setInterval(Boxmove,0.5);//没0.005秒计时器重复执行一次该函数
  92.                     
  93.                     
  94.                     
  95.                         
  96.                 </script>
  97.                 
  98.                 
  99.             </div>
  100.         </div>
  101.         
  102.     </body>
  103. </html>

阅读(959) | 评论(0) | 转发(0) |
0

上一篇：JavaScript for if 对tab选框的制作

下一篇：JavaScript图片循环无缝播放制作

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6