js动画之平抛运动

时间：2022-01-18 16:45:58
<!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动画之平抛运动的更多相关文章

  1. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  2. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  3. CSS VS JS动画，哪个更快&lbrack;译&rsqb;

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  4. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  5. css与 js动画 优缺点比较

    我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...

  6. &lbrack;学习笔记&rsqb;js动画实现方法，作用域，闭包

    一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...

  7. 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 首 ...

  8. js动画（四）

    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...

  9. css动画特效与js动画特效（一）------2017-03-24

    1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...

随机推荐

  1. 【Swift学习】Swift编程之旅---可选链（二十一）

    可选链Optional Chaining是一种可以在当前值可能为nil的可选值上请求和调用属性.方法及下标的方法.如果可选值有值,那么调用就会成功:如果可选值是nil,那么调用将返回nil.多个调用可 ...

  2. 使用mac 终端利用alias设置快捷命令

    在终端中输入快捷命令可以提高工作效率,同时可以少记很多命令 如何做: 首先在~/目录下编辑 .bash_profile这个隐藏文件,如果你想直接双击此文件打开编辑的话请在终端输入 Mac 显示隐藏文件 ...

  3. windows 10

    http://auPL.v4.b1.download.windowsupdate.com/c/updt/2015/07/10240.16384.150709-1700.th1_clientchina_ ...

  4. 翻译qmake文档 目录

    利用空闲时间把qmke的文档翻译出来,翻译水平有限,有些地方翻译的不好,请谅解, 如果您能指出来,我会很感激并在第一时候做出修改. 翻译qmake文档(一) qmake指南和概述 翻译qmake文档( ...

  5. &lbrack;ERROR&rsqb;&lbrack;org&period;springframework&period;web&period;context&period;ContextLoader&rsqb;&lbrack;main&rsqb; Context initialization failed org&period;sprin

    做一个SSH为基础框架的webapp小DEMO,复制了一把以前可以跑的代码,竟发现无法初始化数据源,报错如下: [ERROR][org.springframework.web.context.Cont ...

  6. 模仿天猫实战【SSM版】——项目起步

    前言:现在自己的学习似乎遇到了瓶颈,感觉学习了 SSM 之后有一些迷茫,不知道接下来该往哪里去努力了,我觉得这是个很不好的状态,为了度过这段时期,我准备把天猫模仿下来(给自己找点事做)之后开始去巩固 ...

  7. django-haystack全文检索

    一:使用的工具haystack是django的开源搜索框架,该框架支持Solr,Elasticsearch,Whoosh, *Xapian*搜索引擎,不用更改代码,直接切换引擎,减少代码量.搜索引擎使 ...

  8. http 400错误【原】

    http 400错误现象: 使用java代码访问某PDF文件地址, 报了http 400错误 ,浏览器却能正常访问 . 所以猜测浏览器对地址做了额外处理. 异常代码 String srcUrl = & ...

  9. linux安装字体方法

    1.查看系统中文字体 #fc-list :lang=zh 2.如果提示commont not fount 说明为安装fontconfig 3.安装fontconfig #yum -y install ...

  10. jquery中点击切换的实现

    项目中经常会遇到一种情况,就是点击切换,比如点击按钮,div样式为1,再点击一下按钮,div样式为2,再点击一下按钮,div样式为1.需要自定义jQuery方法toggle. // toggle方法 ...

相关文章