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 ...
随机推荐
- Xcode7 *** does not contain bitcode. You must rebuild it with bitcode enabled (Xcode setting ENABLE_BITCODE)
*** does not contain bitcode. You must rebuild it with bitcode enabled (Xcode setting ENABLE_BITCODE ...
- php : 基础(4)
流程控制 循环结构 循环的中断 循环中,有两种中断语句可以使用: break: 用于完全终止某个循环,让执行流程进入到循环语句后面的语句: continue: 用于停止当前正在进行的当次循环,而进入到 ...
- C++备忘录
参考资料: 1. <C++编程思想(第一卷)> 知识点: ● register变量:它是一种局部变量类型.它告诉编译器尽快访问该变量.一般会把变量放在寄存器中,但不保证一定会.不能得到或计 ...
- css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？一起来$('.float')
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class=&quo ...
- 专为控制打印设计的CSS样式
大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机.在现实世界中,很多人依赖从网站上打印网页来参考: 在这个数字时代, 在一些特殊的场合,很多人手中还会拿着纸张.Web开发人员 ...
- IOC理解
控制反转(反转控制):谁控制了谁? 就是交换控制权1.A a =new A(); 要使用这个A 必须你去new他.控制权在a2.由第三方来进行创造这个A,你用的时候直接用就是.控制权在第三方. 3 ...
- nginx配合zabbix编译安装时web下一步跳转问题
很多时候编译安装的时候把zabbix的php包拷贝到web所在目录之后(本文为nginx所在html目录),网页打开http:/localhost/zabbix却进不去下图: 或者是点了下一步没反应, ...
- cocos2dx 3.1获取系统当前时间
std::string Tools::getcurrTime() { #if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID || CC_TARGET_PLATF ...
- EntityFrameWork使用MySql数据库分页的BUG
环境 使用MySQL Connector NET 6.7.4+EF5.0+VS2010 问题描述 IQueryable<T>类型的Where方法和Skip或Take方法一起使用时,生成的S ...
- 安装.Net Framework3.5
Dism /online /enable-feature /featurename:NetFX3 /All /Source:V:\sources\sxs /LimitAccess