<!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抛物线的更多相关文章

  1. js抛物线动画——加入购物车动效

    参考文章:http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-元素-抛物线-运动-动画/ parapola.js /*! * by zh ...

  2. js 抛物线 笔记备份

    var funParabola = function(element, target, options) { /* * 网页模拟现实需要一个比例尺 * 如果按照1像素就是1米来算,显然不合适,因为页面 ...

  3. fly.js抛物线连续不断加入购物车

    http://yanshi.sucaihuo.com/jquery/2/298/demo/

  4. js加入购物车抛物线动画

    天猫将商品加入购物车会有一个抛物线动画,告诉用户操作成功以及购物车的位置,业务中需要用到类似的效果,记录一下实现过程备忘,先上demo 一开始没有想到用抛物线函数去做,也已经忘记还有这么个函数了,想着 ...

  5. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...

  6. clips 前端 js 动画 抛物线加入购物车

    抛物线加入购物车的特效动画(支持ie7以上,移动端表现良好)    1.引用一个极小的jquery插件库    2.启动 设置 起点 终点 和完成后回调函数 1.插件地址 git-hub上的官方主页 ...

  7. js实现一条抛物线

    抛物线运动解释: 以右开口为例,根据公式  y^2 = 2px .确定p的值,已知x求y. <!DOCTYPE html> <html> <head> <me ...

  8. js实现抛物线

    这个是很简单的一种方式,利用了css3的transition属性 <!DOCTYPE html> <html lang="en" style="widt ...

  9. Vue项目中用的Jquery.js和easing.js做的抛物线

    如果项目中还用到自有的$ <script> jQuery.noConflict();</script> //星星掉落movePathNew(args) { let self = ...

随机推荐

  1. xx云网络实施方案案例

    由于xx云在我公司进行试用,对接我方存储,于是乎就负责网络实施方案,下面是具体方案介绍 ip分配 具体网络拓扑如下: 下面是两台交换机配置 IPMI交换机配置如下: [Quidway]di cu !S ...

  2. php基础知识测试总结

    1.LAMP具体结构包括Linux系统,Apache服务器,MySQL数据库,PHP语言. WAMP具体结构包括Windows系统,Apache服务器,MySQL数据库,PHP语言. 2.B/S架构: ...

  3. 【TopCoder】SRM159 DIV2总结

    250分题:给出一些规则,问街道上哪些地方可以停车. 简单的模拟题,考察每条规则是否成立即可. 代码:StreetParking 500分题:实现集合的交,并和差运算. 交运算:一个数组放到集合中,遍 ...

  4. 【HackerRank】Service Lane

     Calvin is driving his favorite vehicle on the 101 freeway. He notices that the check engine light o ...

  5. 【Head First Servlets and JSP】笔记19：JavaBeans与JSP动作元素（<jsp:setProperty.....>、<jsp:getProperty.....>）

    内容来自imooc. 1.什么是JSP动作元素 2.在JSP页面中如何使用Javabeans <jsp:......>表示这是一个JSP动作元素 3.使用JSP动作元素创建JavaBean ...

  6. OC_NSString、

    8月17日NSString 一.字符串的创建 //1.创建常量字符串 NSString *str1 = @"hello world"; NSLog(@"%@", ...

  7. Linux文件系统十问---深入理解文件存储方式(rhel6.5，EXT4)【转】

    本文转载自:https://blog.csdn.net/tongyijia/article/details/52832236 前几天在红黑联盟上看了一篇博客<Linux文件系统十问—深入理解文件 ...

  8. Centos7.4 Nginx反向代理+负载均衡配置

    Ningx是一款高性能的HTTP和反向代理服务器,配置起来也比较简单. 测试环境: 172.16.65.190 Nginx-反向代理 172.16.65.191 Ningx-Web 172.16.65 ...

  9. ssm搭建相关的问题

    在搭建ssm框架时候踩得坑:1.对于拦截器url-parttern的设置:第一次设置的是/** 本以为这个是表示拦截所有,没想到这是错误的写法,正确的写法是/    启动项目不会报错,但是会出现404 ...

  10. python爬取糗事百科段子

    初步爬取糗事百科第一页段子(发布人,发布内容,好笑数和评论数) #-*-coding:utf--*- import urllib import urllib2 import re page = url ...