购物车飞入的动画效果

最新推荐文章于 2025-05-18 13:54:13 发布

kakaxiD

最新推荐文章于 2025-05-18 13:54:13 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：个人日记文章标签：移动

本文链接：https://blog.youkuaiyun.com/kakaxiD/article/details/53906151

个人日记专栏收录该内容

108 篇文章

订阅专栏

本文介绍了一个简单的网页应用案例，该应用通过原生JavaScript实现了商品加入购物车时的飞行动画效果。页面包含一个模拟菜单及商品列表，用户点击商品数量加号时，商品图标会飞入屏幕底部的购物车中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网盘下载地址：链接: https://pan.baidu.com/s/1kVwNYPD 密码: dyda

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒人原生模拟移动APP飞入购物车动画效果</title>
    <meta content="width=device-width, initial-scale=1,maximum-scale=1,maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 代码部分begin -->
    <div class="store">
        <aside class="menu">
            <li typeid="tuijian">店铺推荐</li>
            <li typeid="123100" class="current">热卖推荐</li>
            <li typeid="122820">嗦碗粉</li>
            <li typeid="123088">赤粉套餐</li>
            <li typeid="122821">秘制盖码（肉不够？这里这里加！）</li>
            <li typeid="122822">秘制卤味米粉伴侣</li>
            <li typeid="123057">夏日特饮</li>
        </aside>
        <aside class="list">
            <div id="tuijian" class="item">
                <li productid="1444574" productattrid="3665545" packcost="2">
                    <img src="images/logoimg.png" alt="" style="width: 50px;height: 50px;display:inline-block;">
                    <div style="display: inline-block;">
                    <p class="title">【微辣】脆嫩牛肚粉</p>
                    <p class="price">￥20.0</p>
                    <p class="sale">近期销售7份</p>
                    <div class="add0"></div>
                    <div class="add1">
                        <i class="reduce"></i>
                        <span class="number">1</span>
                        <i class="add"></i>
                    </div>
                    </div>
                </li>
                <li productid="1446265" productattrid="3669009" packcost="2">
                    <p class="title">【爆款】赤粉三侠</p>
                    <p class="price">￥28.0</p>
                    <p class="sale">近期销售6份</p>
                    <div class="add0"></div>
                    <div class="add1">
                        <i class="reduce"></i>
                        <span class="number">1</span>
                        <i class="add"></i>
                    </div>
                </li>
                <li productid="1444571" productattrid="3665542" packcost="2">
                    <p class="title">【酱汁】汁骨牛排粉</p>
                    <p class="price">￥24.0</p>
                    <p class="sale">近期销售3份</p>
                    <div class="add0"></div>
                    <div class="add1">
                    <i class="reduce"></i>
                    <span class="number">1</span>
                    <i class="add"></i>
                    </div>
                </li>
            </div>
        </aside>
    </div>
    <footer class="shop">
        <div class="money">
            <!--<span id="amount">0</span>-->
            <div class="shopcar">
                <span id="amount">99</span>
                <img src="images/shopcar.png" alt="">
            </div>
            <div class="num">￥<span id="price">0.0</span></div>
        </div>
        <div id="go" class="go">选好了</div>
    </footer>
    <img src="../images/logo.png" style="display:none;">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.fly.min.js"></script>
    <script>
        function addFly(obj,event) {
            /*var addcar = $(this);
            var img = addcar.parent().find('img').attr('src');//获取当前点击图片链接
            var flyer = $('<img class="u-flyer" src="'+img+'">');//抛物体对象*/

            var offset = $('#amount').offset();
            var img =$(obj).parents('li').find('img').attr('src');//获取当前点击图片链接
//          alert(img);
            var flyer = $('<img class="u-flyer" src="'+img+'"/>');//抛物体对象
            flyer.fly({
                start: {
                    left: event.pageX-40,//抛物体起点横坐标
                    top: event.pageY-20//抛物体起点纵坐标
                },
                end: {
                    left: offset.left,//抛物体终点横坐标
                    top: offset.top,//抛物体终点纵坐标
                    width: 24,
                    height: 24,
                }
            });
        }
        $(function(){
            $(".add").on("click",function(){ //增加数量
                var n=$(this).prev('span').text();
                var num=parseInt(n)+1;
                if(num==0){return;}
                $(this).prev().text(num);
                addFly(this,event);
                $("#amount").text(num);
            });
            $(".reduce").on("click",function(){//减少数量
                var n=$(this).next().text();
                var num=parseInt(n)-1;
                if(num==0){return;}
                $(this).next().text(num);
            })
        })
    </script>
    <!-- 代码部分end -->
</body>
</html>