购物车抛物线小球

直接上代码，需自行引入jq
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .container{
                height: 400px;
                width: 500px;
                margin: 0 auto;
                margin-top: 100px;
                position: relative;
            }
            .reduce,
            .plus{
                width: 20px;
                padding: 5px;
                position: absolute;
                right: 0;
                top: 0;
            }
            .reduce{
                transition: all 0.4s linear;
                opacity: 0;
            }
            .reduce.show{
                opacity: 1;
                transform: translate3d(-50px,0,0);
            }
            .reduce.show img{
                transform: rotate(-180deg);
            }
            .number{
                position: absolute;
                right: 30px;
                top: 0;
                display: inline-block;
                line-height: 34px;
                width: 20px;
                text-align: center;
                display: none;
            }
            .reduce img,
            .plus img{
                width: 100%;
                transition: all 0.4s linear;
            }
            .cart{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: #008ADD;
                font-size: 12px;
                color: #fff;
            }
            .cart img{
                width: 30px;
                height: 30px;
                margin-left: 5px;
                margin-top: 5px;
            }

            .balls{
                position: absolute;
                bottom: 30px;
                left: 11px;
            }
            .ballcontainer{
                position: absolute;
                left: 0;
                top: 0;
                width: 20px;
                height: 20px;
                display: none;
                transition: all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41);
            }
            .ballcontainer[show=false]{
                display: none;
            }
            .balls .ball{
                width: 20px;
                height: 20px;
                background: #008ADD;
                border-radius: 50%;
                transition: all 0.4s linear;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="reduce" onclick="reduce()">
                <img src="reduce.png"/>
            </div>
            <span class="number">0</span>
            <div class="plus" onclick="plus(this)">
                <img src="plus.png"/>
            </div>


            <div class="cart">
                <img src="cart.png"/>
            </div>
            <!--5个小球，用户快速点击时可同时存在多个-->
            <div class="balls">
                <div class="ballcontainer" show="false"><div class="ball"></div></div>
                <div class="ballcontainer" show="false"><div class="ball"></div></div>
                <div class="ballcontainer" show="false"><div class="ball"></div></div>
                <div class="ballcontainer" show="false"><div class="ball"></div></div>
                <div class="ballcontainer" show="false"><div class="ball"></div></div>
            </div>
        </div>
    </body>


    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        function plus(el){
            var oldNumber = parseInt($('.number').text());
            oldNumber++;
            $('.number').show();
            $('.number').text(oldNumber);
            $('.reduce').addClass('show');
            drop(el);
        }

        function reduce(){
            var oldNumber = parseInt($('.number').text());
            oldNumber--;
            if(oldNumber <= 0){
                oldNumber = 0;
                $('.number').hide();
                $('.reduce').removeClass('show');
            }
            $('.number').text(oldNumber);
        }

        function drop(el){
            var ballcontainers = $(".ballcontainer");
            var offset = $(el).offset();
            var oldoffset = $('.balls').offset();//获取小球的起始位置
            for (var i = 0;i < ballcontainers.length; i++) {
                if($(ballcontainers[i]).attr('show') == 'false'){
                    $(ballcontainers[i]).attr('show','true');
                    var y = -(oldoffset.top - offset.top); 
                    var x = offset.left - oldoffset.left;
                    $(ballcontainers[i]).css('webkitTransform','translate3d(0,'+ y +'px,0)');
                    $(ballcontainers[i]).children('.ball').css('webkitTransform','translate3d(' + x + 'px,0,0)');
                    $(ballcontainers[i]).css('display','block');
                    setTimeout(function(){//不加这个看不见小球
                        $(ballcontainers[i]).css('webkitTransform','translate3d(0,0,0)');
                        $(ballcontainers[i]).children('.ball').css('webkitTransform','translate3d(0,0,0)');
                    },10)
                    var rf = $(ballcontainers[i]).offset();//未使用，仅仅用来触发浏览器重绘，不加这个会有问题
                    return;
                }
            }
        }

        $('.ballcontainer .ball').on('transitionend',function(){
            $(this).closest('.ballcontainer').css('display','none');
            $(this).closest('.ballcontainer').attr('show','false');
        })
//      console.log(document.getElementsByClassName('plus')[0].getBoundingClientRect())//getBoundingClientRect可以获取元素的位置
    </script>
</html>
购物车抛物线小球

猜你喜欢
