HTML
首先载入jQuery库文件和jquery.fly.min.js插件。
接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。
然后,我们还需要在页面的右侧加上购物车以及提示信息。
CSS
我们使用CSS先将商品排列美化,然后设置右侧购物车样式,具体请看代码:
jQuery
我们要实现的效果是,当用户点击“加入购物车”按钮时,当前商品图片会变成一个缩小的圆球,以按钮为起点,向右侧以抛物线的形式飞出,最后落进入页面右边的购物车里,并操作提示成功。在飞出之前,我们要获取当前商品的图片,然后调用fly插件,之后的抛物线表格都是由fly插件完成,我们只需定义起点和终点等参数即可。
复制上面的代码,保存并即可看到效果,Fly插件运行的项目官网地址是:https://github.com/amibug/fly,值得一提的是,IE10以下需要添加以下js:
<脚本 src="requestAnimationFrame.js">
以上就是本文的全部内容了,希望大家能够喜欢