仅供学习，转载请注明出处


jquery 加入购物车示例_html


编写一个加入购物车的按钮，然后动画一个圆点到购物车，同时数量加1。

  • 淡定直接写出基本html以及css，如下：

jquery 加入购物车示例_html_02


  • 根据点击加入购物车的位置，增加一个红色的圆形

jquery 加入购物车示例_css_03


  • 编写jquery实现小红圆的移动效果、以及购物车数量的追加

jquery 加入购物车示例_html_04

jquery 加入购物车示例_jquery_05

jquery 加入购物车示例_html_06


每点击一次加入购物车，小红球就会移动到购物车数量，并且数量每次加1

完整代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){

            var $ball = $('.ball');

            $('.add_cart_warp input').click(function(){
                // 打印加入购物车按钮的尺寸位置
                // console.log($('.add_cart_warp input').offset());
                // console.log($('.add_cart_warp input').width());
                // console.log($('.add_cart_warp input').height());

                $ball.css({
                    "top":$('.add_cart_warp input').offset().top+($('.add_cart_warp input').height()/2),
                    "left":$('.add_cart_warp input').offset().left+($('.add_cart_warp input').width()/2),
                }).show();


                // 打印购物车数量的尺寸位置
                console.log($('.cart_warp').offset());
                console.log("width=" + $('.cart_warp').width());
                console.log("height=" + $('.cart_warp').height());

                var $ball_cart_top = $('.cart_warp').offset().top+($('.cart_warp').height()/4);
                var $ball_cart_left = $('.cart_warp').offset().left+($('.cart_warp').width()/2)
                // var $ball_cart_top = $('.cart_warp').offset().top;
                // var $ball_cart_left = $('.cart_warp').offset().left;

                console.log("ball_cart_top=" + $ball_cart_top);
                console.log("ball_cart_left=" + $ball_cart_left);

                // 设置改变位置的动画animate
                $ball.animate({
                    "top":$ball_cart_top,
                    "left":$ball_cart_left,
                },2000,function(){
                    // 设置小红球消失
                    $ball.fadeOut();
                    // 设置数量+1
                    console.log($('.cart_warp em').html());
                    var sum = parseInt($('.cart_warp em').html()) + 1;
                    console.log(sum);
                    $('.cart_warp em').html(sum);
                })

            })

        })
    </script>
    <style type="text/css">
        .add_cart_warp {
            margin-top: 100px;
            margin-left: 100px;
        }

        .ball{
            width: 10px;
            height: 10px;
            border-radius: 10px;
            background-color: red;
            position: fixed;
/*          top:100px;
            left: 108px;*/
            display: none;
        }

        .cart_warp{
            width: 100px;
            height: 20px;
            margin-top:80px;
            margin-left: 300px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="ball"></div>

    <div class="add_cart_warp">
        <input type="button" name="" value="点击加入购物车">
    </div>
    
    <!-- div.cart_warp>span{购物车数量}+em{0} -->
    <div class="cart_warp">
        <span>购物车数量</span>
        <em>0</em>
    </div>
</body>
</html>


jquery 加入购物车示例_jquery_07