js抛物线
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
position: relative;
width: 1000px;
height: 550px;
margin: 0 auto;
border: 1px solid #ccc;
margin-top: 50px;
}
#fall {
width: 20px;
font-size: 1px;
height: 20px;
background: #000;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<input type="button" value="演示" onclick="demo()">;
<div class="wrap">
<div id="fall">o</div>
</div>
<script>
function demo() {
var x, y, a,t;
x=2;
y=-2;
a=0.0098;
t=10;
var f=document.getElementById('fall');
var Vx=parseInt(x),
Vy=parseInt(y),
g=a,
t=parseInt(t),
h=0,l=0,Sx=0,Sy=0;
var i=setInterval(function(){
if(f){
Sx+=Vx*t;
l=Sx;
Vy+=g*t;
h+=Vy*t;
f.style.left=l+'px';
f.style.top=h+'px';
if(h>500||l>900)clearInterval(i);
}
},t);
}
// demo(2,-2,0.0098,10); </script>
</body>
</html>
js抛物线的更多相关文章
- js抛物线动画——加入购物车动效
参考文章:http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-元素-抛物线-运动-动画/ parapola.js /*! * by zh ...
- js 抛物线 笔记备份
var funParabola = function(element, target, options) { /* * 网页模拟现实需要一个比例尺 * 如果按照1像素就是1米来算,显然不合适,因为页面 ...
- fly.js抛物线连续不断加入购物车
http://yanshi.sucaihuo.com/jquery/2/298/demo/
- js加入购物车抛物线动画
天猫将商品加入购物车会有一个抛物线动画,告诉用户操作成功以及购物车的位置,业务中需要用到类似的效果,记录一下实现过程备忘,先上demo 一开始没有想到用抛物线函数去做,也已经忘记还有这么个函数了,想着 ...
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- clips 前端 js 动画 抛物线加入购物车
抛物线加入购物车的特效动画(支持ie7以上,移动端表现良好) 1.引用一个极小的jquery插件库 2.启动 设置 起点 终点 和完成后回调函数 1.插件地址 git-hub上的官方主页 ...
- js实现一条抛物线
抛物线运动解释: 以右开口为例,根据公式 y^2 = 2px .确定p的值,已知x求y. <!DOCTYPE html> <html> <head> <me ...
- js实现抛物线
这个是很简单的一种方式,利用了css3的transition属性 <!DOCTYPE html> <html lang="en" style="widt ...
- Vue项目中用的Jquery.js和easing.js做的抛物线
如果项目中还用到自有的$ <script> jQuery.noConflict();</script> //星星掉落movePathNew(args) { let self = ...
随机推荐
- “格式化HDFS后,HMaster进程启动失败”的问题解决
用 hadoop namenode -fromat 格式化后,用./start-hbase.sh 启动HMaster和HRegionServer,但是过几秒种后HMaster进程自动关闭,HRegio ...
- boost之定时器和io_service
1.定时器的使用,sleep是等待线程,asio封装了操作系统的异步系统调用select,epoll. io_servie 实现了一个任务队列,这里的任务就是void(void)的函数.Io_serv ...
- 爬虫四 selenium模块
一.介绍 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作, ...
- iOS视图生命周期
视图是应用的一个重要组成部分,功能的实现与其息息相关,而视图控制器控制着视图,其重要性在整个应用中不言而喻. 1.视图生命周期与视图控制器关系 以视图的4 种状态为基础,我们来系统了解一下视图控制器的 ...
- 缓存:Memcached Redis
一.Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的 ...
- PsySH——PHP交互式控制台
PsySH PsySH is a runtime developer console, interactive debugger and REPL for PHP. PsySH是一个PHP的运行时开发 ...
- Python编程-数据类型方法
一.进制简介 进制也就是进位制,是人们规定的一种进位方法.对于任何一种进制---X进制,就表示某一位置上的数运算时是逢X进一位.十进制是逢十进一,十六进制是逢十六进一,二进制就是逢二进一,以此类推,x ...
- 主攻ASP.NET MVC4.0之重生:ASP.NET MVC Web API
UserController代码: using GignSoft.Models; using System; using System.Collections.Generic; using Syste ...
- 20145231《Java程序设计》课程总结
20145231 <Java程序设计>课程总结 每周读书笔记链接汇总 ● 20145231<Java程序设计>第一周学习总结 ●20145231<Java程序设计> ...
- MySQL数据库基本操作(三)
MySQL补充: mysql是关系型数据库,关系数据库,是建立在关系模型基础上的数据库,现实世界中的各种实体,以及实体之间的各种联系,均用关系模型(table)来表示.#关系模型就是指二维表格模型,因 ...