原生js小球运动
//html代码
<input type="button" value="小球运动" />
<div></div>
//js代码
var btn = document.getElementsByTagName("input")[0];
var ball = document.getElementsByTagName("div")[0];
var speedX = 10;
var speedY = 10;
var timer = null;
btn.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
ball.style.left = ball.offsetLeft + speedX + "px";
ball.style.top = ball.offsetTop + speedY + "px";
var x = window.innerWidth - ball.offsetWidth;
var y = window.innerHeight - ball.offsetHeight;
//边界检测
if( ball.offsetLeft <= 0 ){
speedX *= -1;
}else if( ball.offsetLeft >= x ){
ball.style.left = x + "px";
speedX *= -1;
}
if( ball.offsetTop <= 0 ){
speedY *= -1;
}else if( ball.offsetTop >= x ){
ball.style.top = y + "px";
speedY *= -1;
}
},10)
}
最新文章
- 虚拟dom与diff算法 分析
- C# WinForm 禁止最大化、最小化、双击标题栏、双击图标等操作(转载)
- 基于@AspectJ配置Spring AOP之一--转
- TabBarController
- 【python】入门学习(十)
- @import与link
- Android RadioGroup设置默认选中项
- split 方法的正确使用姿势
- MVC路由调试工具RouteDebug
- CentOS 6.4 编译安装Mysql 5.6.14
- P2P编程(十)
- 三次握手wireshark抓包分析,成功握手和失败握手
- poj 3522 Kruskal
- 对于Swift的Enum,文档上没有说的
- pyqt5 QGraphicsView颜色动画问题(不兼容,运行不了动画)
- Sql server数据库定时任务,数据库作业,数据库定时任务
- 使用RAP2和Mock.JS实现Web API接口的数据模拟和测试
- Git入门—创建项目
- Andrew Ng-ML-第十三章-支持向量机
- Linux env命令详解