JS*抛物线加入购物车特效实现代码_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-10 23:10:53 点击率：次

1. 简介

要想让你的购物车有种高大上的感觉，加入特效的功能是必不可少的。

2. 实现思路

设置一些简单的样式
模拟把它添加到购物车中，数量增加
从点击的位置开始动画，结束动画

3. 代码实现

CSS代码

咱们给它设置一些简单的样式，让它显得不是那么的太low

.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代码

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

<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. 结束语

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

# js购物车特效 # js加入购物车动画效果 # 加入购物车js特效 # JS抛物线动画实例制作 # JS实现的抛物线运动效果示例 # js弹性势能动画之抛物线运动实例详解 # js绘制购物车抛物线动画 # js实现商品抛物线加入购物车特效 # JavaScript模拟重力状态下抛物运动的方法 # 基于Cesium绘制抛物弧线 # 让它 # 把它 # 要想 # 很简单 # 都很 # 购物车 # 第三方 # 我写 # 必不可少 # 给它 # 车中 # 起来了 # fixed # position # left # margin # border # height # strong # radius

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：使用箭头云主机建站时如何选择合适的服务器配置？

下一篇：Excel如何绘制斜线表头 Excel制作多级斜线表头超详细

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：使用箭头云主机建站时如何选择合适的服务器配置？

下一篇：Excel如何绘制斜线表头 Excel制作多级斜线表头超详细