需求

电商 APP 购买商品时，很多都有上图的红色小球抛物线效果

实现思路

确定抛物线的起始和终止位置
通过 js 在起始位置创建一个 document 对象，作为红色小球
通过 jQuery.fly 插件提供的fly函数来移动小球，移动至终止位置
当小球到达终止位置后，通过fly插件提供的 onEnd 回调函数，将小球销毁

示例代码

<!DOCTYPE html>
<html lang="zh" style="font-size: 46.875px;">
<head>
    <meta charset="UTF-8">
    <title>fly Demo</title>
    <style>
        td {height: 300px;}
        table {width:100%;}
        img {width: 30%;}
    </style>
    <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../js/fly.min.js"></script>
    <script type="text/javascript">
        function fly() {
            var x = $("#fashe").offset().left;
            var y = $("#fashe").offset().top;
            pwxTex(x, y);
        }
        // 抛物线特效
        function pwxTex(x, y) {
            var speedI = $("#speedI").val();
            var leftI = $("#b_leftI").val();
            var topI = $("#b_topI").val();

            // 获得目标的偏移量
            var offset = $('#jieshou').offset();
            var div = document.createElement('div');
            div.className = 'pao';
            div.style.cssText = 'transform: translate3d(0, 0, 0);' +
                                'width: 0.75rem;' +
                                'height: 0.75rem;' +
                                'border-radius: 50%;' +
                                'background: red;' +
                                'position: fixed;' +
                                'z-index: 99999999;' +
                                'top:'+x+'px;left:'+y+'px';
            // 将生成的 div 写入 body 标签下
            $('body').append(div);
            // 获得生成的抛物线效果对象
            var flyer = $('.pao');
            var e_leftI = $('#e_leftI').val();
            var e_topI = $('#e_topI').val();
            flyer.fly({
                start: {
                    left: x - leftI,
                    top: y - topI
                },
                end: {
//                  left: (offset.left + $('#jieshou').width() / 2), //结束位置
//                  top: (offset.top + $('#jieshou').height() / 1)
                    left : e_leftI,
                    top : e_topI
                },
                speed: speedI, // 越大越快，默认1.2
                onEnd: function () { // 结束回调
                    $('#jieshou').css({'transform': 'scale(1)'}, 100);
                    this.destory(); // 销毁这个对象
                }
            });
        }
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>zhengbin.cnblogs.com</td>
                <td>
                    <img id="fashe" src="../img/tank.jpg">
                </td>
            </tr>
            <tr>
                <td>
                    <img id="jieshou" src="../img/lajitong.jpg">
                </td>
                <td>
                    speed：<input id="speedI" type="text" value="2">
                    <br>
                    b_left：<input id="b_leftI" type="text" value="1">
                    <br>
                    b_top：<input id="b_topI" type="text" value="-10">
                    <br>
                    e_left：<input id="e_leftI" type="text" value="100">
                    <br>
                    e_top：<input id="e_topI" type="text" value="500">
                    <br>
                    <button onclick="fly()">飞吧~~</button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

jQuery.fly插件实现添加购物车抛物线效果

需求

实现思路

示例代码