原生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)
}
原生js小球运动的更多相关文章
- 使用原生JS实现一个风箱式的demo,并封装了一个运动框架
声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的 ...
- 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果
继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...
- 原生js实现一个DIV的碰撞反弹运动
原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...
- Windows Store App JavaScript 开发:小球运动示例
通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...
- 原生js动画效果(源码解析)
在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...
- 利用tween,使用原生js实现模块回弹动画效果
最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...
- 移动终端学习2:触屏原生js事件及重力感应
如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
随机推荐
- Java-番外篇-Java通过代码发给手机发信息
一.代码 import java.io.IOException; import org.apache.commons.httpclient.Header; import org.apache.comm ...
- python 全局变量的import机制
在之前学习python设计模式(工厂模式实践篇),希望使用全局变量代替c++的宏完成服务自动注册功能时,遇到过一个问题,全局变量的定义和使用放在同一个可执行脚本中的问题.先把有问题的代码晒一下: IS ...
- Vue系列之 => computed实现求值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- C# 获取结构体的所有成员
读取结构体的所有成员(Engine为结构体) FieldInfo[] fieldInfos = typeof(Engine).GetFields();
- mysql的一些指令
说起来mysql,mysql其实是特别简单操作的数据库.它有一下几方面的特点,亦或者是说优点,1,支持多语言:2.移植性比较好:3,我觉得最重要的一点就是它是开源的,因为开源,所以使用广泛,4.效率比 ...
- firefox 实现web交互机器人
现在仅有火狐浏览器可以这样操作 -- Filefox 下面是项目目录 -- 前端页面 -- html <!DOCTYPE html> <html lang="en" ...
- java 常用的异常处理
在Java中异常被当做对象来处理,根类是java.lang.Throwable类,在Java中定义了很多异常类(如OutOfMemoryError.NullPointerException.Index ...
- nginx-负载均衡相关配置 第五章
一.负载均衡: 通过反向代理客户端的请求到一个服务器群组,通过某种算法,将客户端的请求按照自定义的有规律的一种调度调度给后端服务器. Nginx的负载均衡使用upstream定义服务器组,后面跟着组名 ...
- 剑指offer(32)把数组排成最小的数
题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 题目分析 主 ...
- bzoj1001狼抓兔子 对偶图优化
bzoj1001狼抓兔子 对偶图优化 链接 https://www.lydsy.com/JudgeOnline/problem.php?id=1001 思路 菜鸡总是要填坑的! 很明显让你求网格图的最 ...