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

时间：2017-05-03 23:55:51 阅读：400 评论：0 收藏：0 [点我收藏+]

标签：translate osi sla 技术 man 购物车 index end bin

样例

技术分享

使用电商 APP 购买商品时，很多都有上图的红色小球抛物线效果，下面通过 jQuery.fly 插件来实现一个简单 Demo。

实现

简单思路：

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

Demo 源码：

<!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>

Demo 实现效果

技术分享

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

标签：translate osi sla 技术 man 购物车 index end bin

原文地址：http://www.cnblogs.com/zhengbin/p/6804508.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行