Tạo hiệu ứng chèn sản phẩm vào giỏ hàng cực đẹp với jQuery

Hôm nay mình sẽ chia sẻ cho các bạn một hiệu ứng dành cho những trang bán hàng. Với hiệu ứng này, mình đảm bảo là khách hàng của các bạn sẽ hài lòng với trang web mà các bạn thiết kế cho họ. Trong bài viết này mình có chèn thêm jQuery Easing Plugin và các bạn có thể download plugin này tại mục download.

HTML Code

Trước tiên, chúng ta cần khung html như sau :

<ul>

    <li class="cart_items">

        <div class="content">

            <a class="product-image" href="javascript:;" title="Product 1"><img alt="Product 1" class="thumbnail" src="1.jpg"></a>

        </div><button class="add-to-cart" title="Add to Cart" type=

        "button">Add to Cart</button>

    </li>

    <li class="cart_items">

        <div class="content">

            <a class="product-image" href="javascript:;" title="Product 2"><img alt="Product 2" class="thumbnail" src="2.jpg"></a>

        </div><button class="add-to-cart" title="Add to Cart" type=

        "button">Add to Cart</button>

    </li>

</ul>

jQuery

$('.add-to-cart').click(function() {

   var cart = $('.shopping_bg');

   var imgtofly = $(this).parents('li.cart_items').find('a.product-image img').eq(0);

    if (imgtofly) {

        var imgclone = imgtofly.clone()

            .offset({ top:imgtofly.offset().top, left:imgtofly.offset().left })

            .css({'opacity':'0.7', 'position':'absolute', 'height':'150px', 'width':'150px', 'z-index':'1000'})

            .appendTo($('body'))

            .animate({

                'top':cart.offset().top + 10,

                'left':cart.offset().left + 30,

                'width':55,

                'height':55

            }, 1000, 'easeInElastic');

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

    }

    return false;

});

Mình hy vọng là với hiệu ứng mà mình chia sẻ cho các bạn trong bài viết này sẽ giúp ích cho những bạn đang thiết kế trang web bán hàng thêm hiệu quả và chuyên nghiệp hơn.