这个是很简单的一种方式，利用了css3的transition属性

<!DOCTYPE html>

<html lang="en" style="width:100%;height:100%;">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width">

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        #ball {

            width:12px;

            height:12px;

            background: #5EA345;

            border-radius: 50%;

            position: fixed;

            transition: left 1s linear, top 1s ease-in;

        }

    </style>

    <title>CSS3 水平抛物线动画</title>

</head>

<body style="width:100%;height:100%;">

    <div id="ball"></div>

</body>

<script>

    var $ball = document.getElementById('ball');

    document.body.onclick = function (evt) {

        console.log(evt.pageX,evt.pageY)

        $ball.style.top = evt.pageY+'px';

        $ball.style.left = evt.pageX+'px';

        $ball.style.transition = 'left 0s, top 0s';

        setTimeout(()=>{

            $ball.style.top = window.innerHeight+'px';

            $ball.style.left = '0px';

            $ball.style.transition = 'left 1s linear, top 1s ease-in';

        }, 20)

    }

</script>

</html>

js实现抛物线的更多相关文章

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

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

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

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

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

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

  4. js 抛物线 笔记备份

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

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

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

  6. js实现一条抛物线

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

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

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

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

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

  9. js抛物线

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 71. Simplify Path (Stack)

    Given an absolute path for a file (Unix-style), simplify it. For example, path = "/home/", ...

  2. C#跨线程操作控件的最简单实现探究

    随着程序复杂度的提高,程序不可避免会出现多个线程,此时就很可能存在跨线程操作控件的问题. 跨线程操作UI控件主要有三类方式: 1.禁止系统的线程间操作检查.(此法不建议使用) 2.使用Invoke(同 ...

  3. tensorflow学习笔记----TensorBoard讲解

    TensorBoard简介 TensorBoard是TensorFlow自带的一个强大的可视化工具,也是一个Web应用程序套件.TensorBoard目前支持7种可视化,Scalars,Images, ...

  4. Mac/win下的docker容器和LAMP环境的安装（亲测）

    docker直接在官网下载就行了无需赘述 接下来就是在终端中运行docker docker ps 显示当前运行的容器 docker images 显示以及装在的镜像 接下来我们安装centos镜像 d ...

  5. Linux Basic学习笔记01

    介绍课程: 中级: 初级:系统基础 中级:系统管理.服务安全及服务管理.Shell脚本: 高级: MySQL数据库: cache & storage 集群: Cluster lb: 4laye ...

  6. java/rabbitmp发布订阅示例（转）

    原文:http://www.cnblogs.com/tinmh/p/6134875.html 发布/订阅模式即生产者将消息发送给多个消费者. 下面介绍几个在发布/订阅模式中的关键概念-- 1. Exc ...

  7. CodeForces 540B School Marks （贪心）

    题意:先给定5个数,n,  k, p, x, y.分别表示 一共有 n 个成绩,并且已经给定了 k 个,每门成绩 大于0 小于等于p,成绩总和小于等于x, 但中位数大于等于y.让你找出另外的n-k个成 ...

  8. CodeForces 690D1 The Wall (easy) (判断连通块的数量)

    题意:给定一个图,问你有几个连通块. 析:不用说了,最简单的DFS. 代码如下: #include <bits/stdc++.h> using namespace std; const i ...

  9. .NET基础 （03）生成、部署和管理

    生成.部署和管理1 如何生成强签名的程序集2 如何把程序集放入GAC中3 延迟签名及其作用4 程序集的版本分哪几部分 1 如何生成强签名的程序集在生成程序集时,CLR提供了两种可选类型:强签名程序集. ...

  10. 关于SoftReference的使用

    SoftReference一般可以用来创建缓存的,缓存我们经常使用,例如:我们在浏览器中浏览了一个网页后,点击跳转到新的网页,我们想回去看之前的网页,一般是点击回退按钮,那么这个时候之前的网页一般就是 ...