JS高仿抛物线加入购物车特效实现代码

1.介绍

为了让你的购物车感觉很高，有必要添加特效。

2.实现思路

设置一些简单的风格模拟，并将其添加到购物车中。数量在增加。从单击的位置开始动画，并结束动画。3.代码实现

CSS代码

让我们设置一些简单的样式，让它看起来不那么低。传单{ display:块；宽度： 50px；高度： 50px；边界半径： 50px；位置：固定；左边距left: 50pxz-index : 9999；} .购物车img { width: 60px高度： 60px；padding: 5px 0 0 250px} .cartBox span { display:块；color:白色；绝对位置：left: 282pxtop: 226px宽度： 25px；高度： 25px；边界半径：50%；文本对齐：中心；线高： 25px；背景-颜色：红色；}HTML代码

简单的结构代码，现在当然很简单了！

div class='box '！[](img/1 . jpg)/div div class=' CartBox ' div class=' cart ' I id=' end '/I！[](img/2 . jpg)span 0/span/div/div简单样式

javascript，javascript

然后，让它动起来。这里我们先介绍两个第三方库的插件，然后写JS代码让它动起来！

script src=' http : js/jquery-3 . 0 . 0 . min . js '/script script src=' http : js/jquery . fly . min . js '/script是见证奇迹的时候了！

$('.方框')。on('点击'，添加购物车)；var num=0；函数addCart(事件){ var offset=$('#end ')。offset()，flyer=$('！[](img/1 . jpg)')；flyer . fly({ start : { left : event . pagex，top: event.pageY }，end : { left : offset . left 280，top: offset.top，width:height : { 0 } })；数量；$('.cart box span’)。文本(数字)；}最终效果

很简单吗？你学会了吗？

4.结束语

仅此而已。希望我的写作能给大家的学习或工作带来一些帮助，也希望读者继续支持我们。