js实现抛物线
这个是很简单的一种方式,利用了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实现抛物线的更多相关文章
- clips 前端 js 动画 抛物线加入购物车
抛物线加入购物车的特效动画(支持ie7以上,移动端表现良好) 1.引用一个极小的jquery插件库 2.启动 设置 起点 终点 和完成后回调函数 1.插件地址 git-hub上的官方主页 ...
- js抛物线动画——加入购物车动效
参考文章:http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-元素-抛物线-运动-动画/ parapola.js /*! * by zh ...
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- js 抛物线 笔记备份
var funParabola = function(element, target, options) { /* * 网页模拟现实需要一个比例尺 * 如果按照1像素就是1米来算,显然不合适,因为页面 ...
- js加入购物车抛物线动画
天猫将商品加入购物车会有一个抛物线动画,告诉用户操作成功以及购物车的位置,业务中需要用到类似的效果,记录一下实现过程备忘,先上demo 一开始没有想到用抛物线函数去做,也已经忘记还有这么个函数了,想着 ...
- js实现一条抛物线
抛物线运动解释: 以右开口为例,根据公式 y^2 = 2px .确定p的值,已知x求y. <!DOCTYPE html> <html> <head> <me ...
- fly.js抛物线连续不断加入购物车
http://yanshi.sucaihuo.com/jquery/2/298/demo/
- Vue项目中用的Jquery.js和easing.js做的抛物线
如果项目中还用到自有的$ <script> jQuery.noConflict();</script> //星星掉落movePathNew(args) { let self = ...
- js抛物线
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- C语言中static修饰符的意义
在C语言中,static通常有2种含义:1)定义变量的生命周期:2)定义变量或者函数的作用域. 变量的生命周期是指,相对于程序运行的进程生命周期,变量存在的时间段.变量的生命周期由变量的存储类型(位置 ...
- OpenGL坐标变换专题
OpenGL坐标变换专题(转) OpenGL通过相机模拟.可以实现计算机图形学中最基本的三维变换,即几何变换.投影变换.裁剪变换.视口变换等,同时,OpenGL还实现了矩阵堆栈等.理解掌握了有关坐 ...
- ubuntu 16.04 nfs服务的搭建
nfs服务是实现Linux和Linux之间的文件共享,nfs服务的搭建比较简单. 现在介绍如何在ubuntu16.04系统中搭建nfs服务,ubuntu的搭建比红帽的还要简单. 1.安装nfs服务 s ...
- Google-优秀移动站点设计10招
Google-优秀移动网站设计10招 1)添加一个醒目的搜索条:在移动终端上,人们希望能够快速找到自己需要的东西 2)把大表格拆分成小块:别搞一个长长的表格页面,上面包含各种输入框 3)允许用户匿名浏 ...
- 样条曲线catmull rom转bezier
b0,..,b3是贝塞尔,c-1, c2是catmull rom控制点 [b0] = 1 [ 0 6 0 0] [c_1] [b1] - [-1 6 1 0] [c0] [b2] 6 [ 0 1 6 ...
- ceph卸载
1.正常卸载 ceph-deploy purge ceph01 ceph-deploy purgedata ceph01 rm -rf /var/lib/ceph rm -rf /etc/ceph r ...
- java之常用的依赖文件pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
- PyCharm社区版+Django搭建web开发环境-2
接上一篇:PyCharm社区版+Django搭建web开发环境-1 1. 创建好django项目并建立app应用:web 2. setting.py:配置app应用 INSTALLED_APPS = ...
- sql添加列,删除列,修改列
有时候,当数据库里面有数据了,再到设计器里面删除列,就删不掉.只能用代码删除. alter table tableName drop column columnName 添加列 ) 修改列 ) --修 ...
- 模仿w3c school的示例导航栏
近日学习HTML,恰巧学习过程中看见w3cschool的示例导航栏看上去很不错,适合新手练习,于是模仿着做了一个. 示例导航栏如下图所示 导航栏自然使用li标签来做,a标签控制背景颜色和鼠标放入的特效 ...