问题描述:购物车动画,就是选择的时候一个动画元素从选择处以抛物线调入左下角的购物车图标,进入后购物车有一个摇晃效果。(如下图)
-------------(×_×) 一个小小的动画,需求也是定制的,不高新到网上找插件。代码也不多。找的插件还要改东西,又引入更多代码。于是决定自己写。
解题思路:
相信大家也不愿意看大堆的代码,写下关键点吧。
1.准备:在选择的地方隐藏一个动画元素(使用fixed定位:因为动画应该是相对于屏幕的,而右边的列表长度大于屏幕,不能使用相对于文档的定位)。
2.过程:(1).选择的时候,先显示这个动画元素。然后根据抛物线路径parabola,每隔一个时间间隔,设置一下动画元素的left,bottom值。
(2).当到达购物车后隐藏动画元素,触发购物车摇晃动画。
3.详解:
(1).看一下抛物线函数:
function parabola(x,y,x1) {