使用jquery.fly插件实现添加购物车抛物动画

小程不爱动

825人浏览 · 2022-08-31 15:32:16

小程不爱动 · 2022-08-31 15:32:16 发布

使用jquery.fly插件实现添加购物车抛物动画

这里引用一个插件：jquery.fly.min.js

Git源码地址：https://github.com/amibug/fly
Demo演示地址：https://codepen.io/hzxs1990225/full/ogLaVp
API使用：

    <script src="jquery.js"></script>
    <script src="dist/jquery.fly.min.js"></script>
    <script>
    jQuery(function($) {
        $('#fly').fly({
            start:{
                left: 11, //开始位置（必填）#fly元素会被设置成position: fixed
                top: 600, //开始位置（必填）
            },
            end:{
                left: 500, //结束位置（必填）
                top: 130, //结束位置（必填）
                width: 100, //结束时高度
                height: 100, //结束时高度
            },
            autoPlay: false, //是否直接运动,默认true
            speed: 1.1, //越大越快，默认1.2
            vertex_Rtop: 100, //运动轨迹最高点top值，默认20
            onEnd: function(){} //结束回调
        });
        $('#fly').play(); //autoPlay: false后，手动调用运动
        $('#fly').destroy(); //移除dom
    });
    </script>

HTML演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fly抛物插件</title>
    <style type="text/css">
        .div1{
            width: 50px;
            height: 50px;
            top: 20%;
            left: 10%;
            position: absolute;
            border: 1px solid;
        }
        .end{
            width: 50px;
            height: 50px;
            left: 90%;
            position: absolute;
            border: 1px solid;
        }
        .shop{
            top: 30%;
            position: absolute;
        }
        .much{
            top: 33%;
            position: absolute;
        }
        .but{
            left: 89.5%;
            top: 10%;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="div1" style="background-color: red;"></div>
    <p class="shop" style="left:10.5%">商品1</p>
    <p class="much" style="left:10.5%">￥10</p>
    <div class="div1" style="left: 15%; background-color: yellow;"></div>
    <p class="shop" style="left:15.5%">商品2</p>
    <p class="much" style="left:15.5%">￥20</p>
    <div class="div1" style="left: 20%; background-color: blue;"></div>
    <p class="shop" style="left:20.5%">商品3</p>
    <p class="much" style="left:20.5%">￥30</p>
    <div class="div1" style="left: 25%; background-color: green;"></div>
    <p class="shop" style="left:25.5%">商品4</p>
    <p class="much" style="left:25.5%">￥40</p>
    <div class="div1" style="left: 30%; background-color: cyan;"></div>
    <p class="shop" style="left:30.5%">商品5</p>
    <p class="much" style="left:30.5%">￥50</p>
    <div class="div1" style="left: 35%; background-color: indigo;"></div>
    <p class="shop" style="left:35.5%">商品6</p>
    <p class="much" style="left:35.5%">￥60</p>
    <div class="div1" style="left: 40%; background-color: purple;"></div>
    <p class="shop" style="left:40.5%">商品7</p>
    <p class="much" style="left:40.5%">￥70</p>
    <div class="div1" style="left: 45%; background-color: orange;"></div>
    <p class="shop" style="left:45.5%">商品8</p>
    <p class="much" style="left:45.5%">￥80</p>
    <div class="end"><p>购物车</p><span class="nums" style="color: red;">0</span></div>
    <button class="but">清空购物车</button>
</body>
</html>

演示页面如下：
在这里插入图片描述

jQuery演示代码：

这里配合获取鼠标指针位置的属性一起使用，如果有不明白的可以参考：获取鼠标位置坐标

<!-- 引入jquery以及fly插件 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src='./js/jquery.fly.min.js'></script>
<script type="text/javascript">
    $(function(){
        // 获取最后购物车的偏移量
        var end_offset = $(".end").offset();
        // 监听点击事件
        $(".div1").click(function(event){
            // 获取当前元素
            var thisItem = $(this);
            // 复制当前元素的副本作为飞过去的示例 
            // 如果不复制元素直接使用原元素元素会直接飞过去
            var flyer = thisItem.clone();
            flyer.fly({
                // 开始位置
                start:{
                    left:event.pageX,   //获取当前点击元素相对于左边缘的距离
                    top:event.pageY     //获取当前点击元素相对于右边缘的距离
                },
                end: {
                    left: end_offset.left + 10,     //获取购物车元素的左边偏移值
                    top: end_offset.top + 10,       //获取购物车元素的顶边偏移值
                    width: 0,           //元素飞到终点后的宽度
                    height: 0,          //元素飞到终点时的高度
                },
                // autoPlay: false, //是否直接运动,默认true
                // speed: 1.1, //越大越快，默认1.2
                // vertex_Rtop: 100, //运动轨迹最高点top值，默认20
                //结束回调
                onEnd: function(){
                	this.destory(); //销毁抛物体 
                }
            });
            // 获取当前购物车的数量 自增一赋值实现数量加1
            var num = $(".nums") . text();
            num++;
            $(".nums").text(num);
            
        });
        //清空购物车的数量0
        $(".but").click(function(){
            $(".nums").text(0);
        });
    });
</script>

最终演示效果如下：

在这里插入图片描述

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模