这个是很简单的一种方式，利用了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. 695. Max Area of Island最大岛屿面积

    ［抄题］: 求最多的联通的1的数量 Given a non-empty 2D array grid of 0's and 1's, an island is a group of 1's (repre ...

  2. CentOS 6.4一键自动化安装ISO镜像光盘

    下载CentOS-6.4-x86_64-minimal.iso 1 http://mirrors.163.com/centos/6.4/isos/x86_64/CentOS-6.4-x86_64-mi ...

  3. Ajax与Controller的参数交互

    理论 jQuery.ajax( options )中重要参数设置 jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据.通过jquery.ajax与SpringMVC的C ...

  4. sscanf高级用法级正则表达式

    sscanf高级用法级正则表达式  摘自:https://www.cnblogs.com/bluestorm/p/6864540.html sscanf与scanf类似,都是用于输入的,只是后者以屏幕 ...

  5. spark读写Sequoiadb

    spark如何读写Sequoiadb,最近被客户问多了,这个记录下. Spark读Sequoiadb数据: package marketing import com.sequoiadb.hadoop. ...

  6. 通过MySql自动同步刷新redis

    在服务端开发过程中,一般会使用MySQL等关系型数据库作为最终的存储引擎,Redis其实也可以作为一种键值对型的数据库,但在一些实际场景中,特别是关系型结构并不适合使用Redis直接作为数据库.这俩家 ...

  7. 扩展JPA方法，重写save方法

    为什么要重构save? jpa提供的save方法会将原有数据置为null,而大多数情况下我们只希望跟新自己传入的参数,所以便有了重写或者新增一个save方法. 本着解决这个问题,网上搜了很多解决方案, ...

  8. windows server2012安装mysql时一直停留在start server的解决方法

    安装的时候,starting server 卡住 原因分析 这个问题小编安装mysql时也碰到过,出现这个问题是my.ini文件没有复制成功了,我们只要在mysql安装目录把把目录中的备份的my-sm ...

  9. mysql基础操作记录

    安装mysql Mac使用homebrew安装mysql,命令行执行以下命令:brew install mysql 启动mysql服务 安装完成后执行start 命令. ➜ ~ mysql.serve ...

  10. mysql - 简单的触发器和存储过程

    delimiter // drop PROCEDURE proc_member_preprocessor;// )) main:BEGIN SELECT COUNT(uid) INTO @proc_h ...