js动画之平抛运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>平抛运动运动</title>
<style>
body{margin: 0px;padding: 0px;}
.animation{
background-color: green;
height: 20px;
width: 20px;
left: 0px;
top: 0px;
border-radius: 10px;
position: absolute;
}
</style>
</head>
<body>
<div id="test" class="animation"></div>
</body>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementById("test"),
WINDOW_WIDTH = window.innerWidth - 20;
WINDOW_HEIGHT = window.innerHeight - 20;
ele.timer = null;
ele.onmouseover =function(){
startAnimation(this);
} function startAnimation(obj){
clearInterval(obj.timer);
var V_x = 30,
G_y = 1,
t = 0;
obj.timer = setInterval(function(){
t++;
var _left = obj.offsetLeft,
_height = obj.offsetTop,
_S_x = V_x*t,
_S_y = G_y*t*t/2 ; if(_S_x >= WINDOW_WIDTH){
obj.style.left = WINDOW_WIDTH +'px';
obj.style.top = _S_y +'px';
clearInterval(obj.timer);
}else if(_S_y >= WINDOW_HEIGHT){
obj.style.left = _S_x +'px';
obj.style.top = WINDOW_HEIGHT +'px';
clearInterval(obj.timer);
}else{
obj.style.left = _S_x +'px';
obj.style.top = _S_y +'px';
} },100)
} }
</script>
</html>
js动画之平抛运动的更多相关文章
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS VS JS动画，哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
- css与 js动画 优缺点比较
我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...
- [学习笔记]js动画实现方法，作用域，闭包
一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...
- css3动画与js动画的一些理解
http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...
- js动画（四）
终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...
- css动画特效与js动画特效（一）------2017-03-24
1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...
随机推荐
- 使用spring aspect控制自定义注解
自定义注解:这里是一个处理异常的注解,当调用方法发生异常时,返回异常信息 /** * ErrorCode: * * @author yangzhenlong * @since 2016/7/21 */ ...
- validate插件深入学习-03validate()方法配置项
validate()方法配置项 rules 定义校验规则 messages 定义提示信息 上面这两个已经介绍过了 rules里隐藏的属性depends,只有符合条件(返回true)的时候才会执行 su ...
- 慕课网__HTML5 存储
application cache 只能更新全部,不能更新单独的文件 在更新后,要重新打开浏览器,缓存才会生效, 不能实时生效
- 远程连接redis
1.在ubuntu上的redis作为服务端,默认是打开的 在redis的配置文件redis.conf中,找到bind localhost注释掉. 注释掉本机,局域网内的所有计算机都能访问. bind ...
- Makefile相关知识
1. Makefile的编写: 1>. makefile的命名 1. makefile 2. Makefile 2>. makefile中的规则 三部分: 目标(app):依赖(main. ...
- Deep Learning 19_深度学习UFLDL教程：Convolutional Neural Network_Exercise（斯坦福大学深度学习教程）
理论知识:Optimization: Stochastic Gradient Descent和Convolutional Neural Network CNN卷积神经网络推导和实现.Deep lear ...
- raw转qcow2
raw转qcow2命令 : qemu-img convert -f raw test.img -O qcow2 test.img.qcow2 转晚之后,还需要virsh edit test,修改里面的 ...
- zabbix3.0.4 部署之九 （zabbix3.0.4 Linux Agent安装）
1.从官网现在源码镜像 http://nchc.dl.sourceforge.net/project/zabbix/ZABBIX%20Latest%20Stable/3.2.1/zabbix-3. ...
- AutoCAD Civil 3D 中缓和曲线的定义
本文对AutoCAD Civil 3D中缓和曲线的定义进行了整理. 原英文网页如下: https://knowledge.autodesk.com/support/autocad-civil-3d/l ...
- SQLServer字符操作
1.CHARINDEX('A',‘VALUE’) result:2 style:PATINDEX(varchar,varchar) 解释:A在字符串VALUE的位置次序. 2.PATINDEX( ...