JS抛物线加入购物车特效教程：CSS+jQuery实现

本文介绍如何使用CSS、HTML和jQuery插件实现网页中商品点击后抛物线飞入购物车的动画效果。通过设置简单的样式结构，利用jquery.fly.min.js库控制动画轨迹，从点击位置平滑移动至购物车图标，并同步更新购物车数量。

简介

为了提升购物车页面的视觉体验，添加动态特效是不可或缺的一环。

实现思路

配置基础样式
模拟添加商品至购物车，并增加数量显示
定义动画起始点与结束点，执行飞行动画

代码实现

CSS代码

配置基础样式以优化视觉效果


.flyer {
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 50px;
      position: fixed;
      margin-left: 50px;
      z-index: 9999;
    }
    .cart img{
      width: 60px;
      height: 60px;
      padding: 5px 0 0 250px;
    }
    .cartBox span{
      display: block;
      color: white;
      position: absolute;
      left: 282px;
      top: 226px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      text-align: center;
      line-height: 25px;
      background-color: red;
    }

HTML代码

构建基础DOM结构，保持代码简洁


<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>

简单样式

JS代码

引入两个第三方库插件，编写JS逻辑实现动画交互


<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/jquery.fly.min.js"></script>

接下来就是见证奇迹的时刻了！


$('.box').on('click', addCart);
    var num = 0;
    function addCart(event) {
      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: 0,
          height: 0
        }
      });
      num++;  
      $('.cartBox span').text(num);
    }

最终效果

实现过程简单，易于掌握

结束语

4. 结束语

以上就是全部内容了，希望我写东西对大家的学习或者工作能带来一定的帮助，同时也希望读者继续支持本站。

JavaScript实现抛物线加入购物车动画效果

简介