javascript---在自由落体实现
2015-10-26 21:47
686 查看
实现一些简单的物业自由落体需要理解:
clientHeight:浏览器客户机的整体高度
offsetHeight:物(实例div)高低
offsetTop:从对象client最顶层的距离
简单demo例如以下:
注:clearTnterval(Time)://防止多个点击事件
clientHeight:浏览器客户机的整体高度
offsetHeight:物(实例div)高低
offsetTop:从对象client最顶层的距离
简单demo例如以下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>free_movement</title> <style type="text/css"> #div1{ position: absolute; height: 100px; width: 100px; background: red; } </style> <script type="text/javascript"> window.onload=function () { var btn=document.getElementById('btn'); var div1=document.getElementById('div1'); var Time=null; var speed=0; btn.onclick=function () { startMove(); } function startMove () { clearInterval(Time); Time=setInterval(function(){ speed+= 3; var T = div1.offsetTop + speed; if(T > document.documentElement.clientHeight - div1.offsetHeight){ T = document.documentElement.clientHeight - div1.offsetHeight; speed *= -1; speed *= 0.75; } div1.style.top=T+'px'; }, 30) } } </script> </head> <body> <input type='button' value='開始运动' id="btn"> <div id="div1"></div> </body> </html>
注:clearTnterval(Time)://防止多个点击事件
相关文章推荐
- Volley及FastJson的简单使用
- JS定时运行 setTimeout()
- JS中toFixed()方法的问题及解决方案
- 细读 php json数据和JavaScript json数据
- JSP的学习(2)——语法知识一
- js图片懒加载资源引用
- JavaScript之射击类小游戏的简单示例
- d3.js绘制箭头
- 【JavaScript】兼容IE6的收起折叠效果
- js中阻止默认事件,阻止冒泡事件
- JS 指定天数倒计时 setInterval()
- JSP 自定义标签:简单标签
- JSP的学习(1)——基本知识与底层原理
- D3.js中使用scale
- js拼接字符串传值,子窗口传值
- jsonString 转字典
- JavaScript 继承代码中,B.prototype = new A(); 的含义是什么?[转自知乎]
- 在Javascript面向对象设计一
- 用javascript写一个前端等待控件
- 用javascript写一个前端等待控件