購物車增加、減少商品時動畫效果：jQuery.Fly.js插件使用方法

本文轉載自查看原文 2015-08-03 16:26 3097 前端Demo/ JavaScript

某些電商網站加入購物車和減少購物車商品數量時，有個小動畫，以拋物線形式增減，如圖：

這里用到了第三方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="width: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;width: 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, //結束位置（必填）
                    width: 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;width: 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, //結束位置（必填）
                    width: 5, //結束時寬度
                    height: 5 //結束時高度
                },
                onEnd: function () { //結束回調
                    this.destroy(); //移除dom
                    _back();
                }
            });
        }

    })
</script>

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 基於jquery fly插件實現加入購物車拋物線動畫效果,jquery.fly.js jQuery.fly插件實現添加購物車拋物線效果購物時，商品加入購物車的飛入效果購物車增加、減少數量JS jQuery實現加入購物車飛入動畫效果 Android-----購物車（包含側滑刪除，商品篩選，商品增加和減少，價格計算，店鋪分類等）加入購物車的動畫效果 js添加購物車效果 js代碼實現購物車效果 js簡單的加入商品到購物車並且顯示名稱數量