用java编写一个抛物线运动_JavaScript实现的抛物线运动效果

最近做购物车功能，看到天猫上的购物车有元素抛物线运动效果，所以也想凑热闹实现一个。

网上搜索了一下，看了一下张鑫旭的《小折腾：JavaScript与元素间的抛物线轨迹运动》，原理张鑫旭已经讲的很清楚了，多说了也没什么意思，就是数学公式。不过看代码个人觉得有点变扭，那不是我的习惯，所以自己重新写了一个。

如何使用：

运动位移的元素必须设置为position: absolute，通过绝对定位控制left，top来实现的；

首先你可以new一个对象：

var bool = new Parabola({

el: "#boll",

offset: [500, 100],

curvature: 0.005,

duration: 3000,

callback: function () {

alert("完成后回调")

},

stepCallback: function (x, y) {

console.log(x, y);

$("

").appendTo("body").css({

"position": "absolute",

"top": this.elOriginalTop + y,

"left": this.elOriginalLeft + x,

"background-color": "#CDCDCD",

"width": "5px",

"height": "5px",

"border-radius": "5px"

});

}

});

参数说明：

参数名

数据类型

默认值

描述

el

jQuery||String(选择器)

null

必须填写的参数，要移动的元素，可以是jQuery对象或选择器

offset

Array

[0, 0]

表示移动元素在X，Y轴的偏移位置，设置了targetEl参数后，该参数将失效

targetEl

jQuery||String(选择器)

null

终点元素，这时就会自动获取该元素的left、top值，来表示移动元素在X，Y轴的偏移位置&