小球运动购物车购物车的小球运动。同时要注意发生请求后的运动情况下，元素是否已经加载到页面中，如果没有要对方法使用pro

小球运动.gif

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小球运动</title>
    <style>
        .cart{
            width: 10px;
            height: 10px;
            position: absolute;
            left: 10px;
            top: 10px;
            background: red;
        }
        .block{
            width: 10px;
            height: 10px;
            position: absolute;
            left: 200px;
            top: 200px;
            background: blue;
            cursor: pointer;
        }
        .move{
            transition-property: left, top,transform;
            transition-duration: 1s, 1s,0.1s;
            transition-timing-function: linear,ease-out,linear;
            /* -moz-transition: all 1s ease-out; 
            -webkit-transition: all 1s;  
            -ms-transition: all 1s;  
            -o-transition: all 1s;  
            transition: all 1s;   */
        }
    </style>
</head>
<body>
    <div class="cart"></div>
    <div class="block"></div>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

index.js


$("body").on("click", ".block", function () {
    controllPath(".block", ".cart")
})
function controllPath(aEle, bEle, curve) {
    //a 为初始点、b为终点 、curve 为曲线函数

    var beginEle = getEle(aEle);
    var endEle = getEle(bEle);
    var beginElePath = getElePath(beginEle);
    var endElePath = getElePath(endEle);
    straightLine(beginElePath, endElePath);

    function getEle(str) {
        if (typeof str == "string") {
            return $(str)
        } else if (str instanceof $) {
            return str
        } else {
            throw new error("这个参数不是jquery也不是字符串")
        }
    }

    function getElePath(ele) {
        var distance = ele.offset()
        return distance
    }

    function straightLine(begin, end) {
        var moveball = CreateBall(begin)
        $("body").append(moveball)
        //设置运动轨迹
        setTimeout(function(){
            moveball.css({
                "left":end.left,
                "top":end.top
            })
        })
        setTimeout(function(){
            moveball.css({
                "transform":"scale(2)",
            })
        },1000)
        setTimeout(function(){
            moveball.remove()
        },1200)

    }

    function CreateBall(begin) {
        var ball = $("<div class='move'></div>")
        ball.css({
            "width": "10px",
            "height": "10px",
            "border-radius": "50%",
            "background": "orange",
            "position": "absolute",
            "left": begin.left,
            "top": begin.top,
        })
        return ball
    }
}

小球运动 购物车

小球运动购物车