购物车效果

w待学习、实践、优化

<script type="text/javascript">
    <!--
    /*
     Add to cart fly effect with jQuery. - May 05, 2013
     (c) 2013 @ElmahdiMahmoud - fikra-masri.by
     license: http://www.opensource.org/licenses/mit-license.php
     */

    var wcart_count_value =0
    $('.add-to-cart').on('click', function () {
        wcart_count_value++
        var cart = $('.shopping-cart');
        //   var imgtodrag = $(this).parent('.item').find("img").eq(0);
        //   var imgtodrag = $(this).parent('.item').find("img").eq(0);
        // var imgtodrag = $('#wfindimg').find("img").eq(0);
        //   var imgtodrag = $('#wimg')
        var imgtodrag = $('body').find("img").eq(0);


        //console.log($('#wfindimg').find("img"))
        console.log(imgtodrag)

        //   var imgtodrag = $(this).parent('.item').find("img").eq(0);

        if (imgtodrag) {
            var imgclone = imgtodrag.clone()
                .offset({
                    top: imgtodrag.offset().top,
                    left: imgtodrag.offset().left
                })
                .css({
                    // 'opacity': '0.5',
                    'opacity': '1',

                    'position': 'absolute',
                    'height': '150px',
                    'width': '150px',
                    'z-index': '100000'
                })
                .appendTo($('body'))
                .animate({
                    'top': cart.offset().top + 10,
                    'left': cart.offset().left + 10,
                    'width': 75,
                    'height': 75
                }, 1000, 'easeInOutExpo');

            setTimeout(function () {
                cart.effect("shake", {
                    times: 3
                }, 200);
            }, 1500);

            imgclone.animate({
                'width': 16,
                'height': 10
            }, function () {
                //   $(this).detach()
            });

            var cart_count = $('.shopping-cart_count');
            //cart_count.text()
            cart_count.text(wcart_count_value)
            cart.attr('style','color:red')
            cart_count.attr('style','color:red')

        }
    });
    //-->
</script>

https://github.com/ElmahdiMahmoud/fly-to-cart-effect

https://codepen.io/anon/pen/ggdzEK?editors=1111

https://codepen.io/elmahdim/pen/tEeDn

http://www.zhangxinxu.com/wordpress/2013/12/JavaScript与元素间的抛物线轨迹运动/

https://github.com/amibug/fly