这个是很简单的一种方式，利用了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. Hibernate事务代码规范写法

    ----------------siwuxie095 事务相关概念 1.什么是事务 逻辑上的一组操作,构成这组操作的各个单元,要么一起成功, 要么一起失败 2.事务的四个特性 1)原子性 2)一致性 ...

  2. (转)Docker镜像中的base镜像理解

    base 镜像有两层含义: 不依赖其他镜像,从 scratch 构建. 其他镜像可以之为基础进行扩展. 所以,能称作 base 镜像的通常都是各种 Linux 发行版的 Docker 镜像,比如 Ub ...

  3. python爬虫之Scrapy 使用代理配置——乾颐堂

    在爬取网站内容的时候,最常遇到的问题是:网站对IP有限制,会有防抓取功能,最好的办法就是IP轮换抓取(加代理) 下面来说一下Scrapy如何配置代理,进行抓取 1.在Scrapy工程下新建“middl ...

  4. Idea2017常用功能

    1,添加java工程  2,导出可执行jar 3,本地代码提交svn新分支 4,乱码问题解决 一次解决所有问题,只需做配置文件的修改即可 解决方案:       在 IntelliJ IDEA 201 ...

  5. emacs-ide配置

    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; CEDET Configuration ;;;;;;;;;; ...

  6. NIOS II SOPC系统自定义IP常见知识点总结

    封装IP1.将写好的Verilog代码添加在Quartus工程中,IP目录下,(如果没有,自己建一个)2.打开Qsys工具,选择New Component3.name和Display name输入合理 ...

  7. 1、Semantic-UI之开发环境搭建

    下载webstrom(其他的任何可以进行前端开发的软件都可以) Download WebStorm: The Smartest JavaScript IDE by JetBrains 安装并激活web ...

  8. 修复DBGrideh使用TMemTableEh在Footers求平均值为0的Bug

    在一个项目中,使用DBGrideh,当使用自带的内存数据集时,对于Footers添加的求平均值,一直显示为0,其他汇总数据都是可以的,而切换使用TClientDataSet或者TADODataSet, ...

  9. Android-Intent意图传递数据

    Intent意图传递基本数据类型: OuterActivity 激活启动 OneActivity 用Intent携带基本数据类型: /** * Intent意图传递数据到另外一个Activity */ ...

  10. jQuery获取各种input输入框的值

    1.获取一组radio单选框的值(name属性为一组的radio的name属性) var q1 = $("input[name=element_name]:checked").va ...