这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js 实现简单的碰壁反弹效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例可以使用 js 来实现简单的碰壁反弹效果,具体的内容请大家参考代码部分。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 碰撞小球
- </title>
- <style>
- #box{ width: 1000px; height: 800px; position: relative; border:1px solid
- red; margin:50px auto 0; } #boll{ width: 50px; height: 50px; /* border-radius:
- 25px;*/ border:1px solid green; position: absolute; top: 66px; left: 88px;
- }
- </style>
- </head>
- <body>
- <div id="box">
- <div id="boll">
- </div>
- </div>
- <script>
- var box = document.getElementById('box');
- var boll = document.getElementById('boll');
- var x = 88,
- y = 66,
- timer1 = null,
- movex = 1,
- movey = 1;
- console.log(box.clientWidth - boll.clientWidth);
- console.log(box.clientWidth - boll.offsetWidth);
- timer1 = setInterval(function() {
- if (movex) { //判断方向
- x++;
- if (x >= box.clientWidth - boll.clientWidth) {
- movex = 0;
- }
- boll.style.left = x + 'px';
- } else {
- x--;
- if (x <= 0) {
- movex = 1;
- }
- boll.style.left = x + 'px';
- }
- if (movey) {
- y++;
- if (y >= box.clientHeight - boll.clientHeight) {
- movey = 0;
- }
- boll.style.top = y + 'px';
- } else {
- y--;
- if (y <= 0) {
- movey = 1;
- }
- boll.style.top = y + 'px';
- }
- },
- 1)
- </script>
- </body>
- </html>
其中 movex 和 movey 两个变量是判断运动的方向。
来源: http://www.phperz.com/article/17/0518/332243.html