购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法

某些电商网站加入购物车和减少购物车商品数量时，有个小动画，以抛物线形式增减，如图：

这里用到了第三方jQuery.Fly.js插件（底层依赖Jquery库，地址：https://github.com/amibug/fly/blob/master/src/fly.js），使用方法直接上代码，自己体验：

引入js库：

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="fly.js" type="text/javascript"></script>
</head>

Html代码：

<body style="text-align: center;">
    <div id="divSource">
        <div>
            <img src="http://images.yummy77.com/img/111012/111012068/g1_150_6.jpg"></img><input type="button" VALUE="add"></input><input type="button" VALUE="remove"></input>
        </div>
        <div>
            <img src="http://images.yummy77.com/img/111011/111011111/g1_150.jpg"></img><input type="button" VALUE="add"></input><input type="button" VALUE="remove"></input>
        </div>
        <div>
            <img src="http://images.yummy77.com/img/211110/211110060/g1_150.jpg"></img><input type="button" VALUE="add"></input><input type="button" VALUE="remove"></input>
        </div>
    </div>
<div id="divTarget" style="60px;height:60px; background: #ddd;margin:20px;">快到碗里来……</div>
</body>

自定义JS代码：

<script type="text/javascript">
    $(function(){
      $("#divSource input[value='add']").bind("click",function(){
            var _sourceImg=$(this).prev();
            var _back=function(){};
            var _target=$("#divTarget");
          objectFlyIn(_sourceImg,_target,_back);
        });
        $("#divSource input[value='remove']").bind("click",function(){
            var _sourceImg=$(this).prev().prev();
            var _back=function(){};
            var _target=$("#divTarget");
            objectFlyOut(_sourceImg,_target,_back);
        });
        /**
         * 对象飞入
         *
         */
        function objectFlyIn(_sourceImg,_target, _back) {
            var addOffset =_target.offset();

            var img = _sourceImg;
            var flyer = $('<img style="display: block; 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 100000;" src="' + img.attr('src') + '">');
            var X,Y;

            if(img.offset()){
                X = img.offset().left - $(window).scrollLeft();
                Y = img.offset().top - $(window).scrollTop();
            }
            flyer.fly({
                start: {
                    left: X + img.width() / 2 - 25, //开始位置（必填）
                    top: Y + img.height() / 2 - 25 //开始位置（必填）
                },
                end: {
                    left: addOffset.left + 10, //结束位置（必填）
                    top: addOffset.top + 10, //结束位置（必填）
                     10, //结束时宽度
                    height: 10 //结束时高度
        },
                onEnd: function () { //结束回调
                    this.destroy(); //移除dom
                    _back();
                }
            });

        }

        /**
         * 对象飞出
         *
         */
        function objectFlyOut(_sourceImg,_target, _back) {
            var addOffset = _target.offset();

            var img = _sourceImg;
            var flyer = $('<img style="display: block; 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 100000;" src="' + img.attr('src') + '">');

            flyer.fly({
                start: {
                    left: addOffset.left, //开始位置（必填）
                    top: addOffset.top //开始位置（必填）
                },
                end: {
                    left: addOffset.left-20, //结束位置（必填）
                    top: addOffset.top-20, //结束位置（必填）
                     5, //结束时宽度
                    height: 5 //结束时高度
                },
                onEnd: function () { //结束回调
                    this.destroy(); //移除dom
                    _back();
                }
            });
        }

    })
</script>

View Code

购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法

相关推荐