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

 Xem demo  Download demo

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.

jQuery, shopping cart, giỏ hàng, cart, hiệu ứng chèn sản phẩm, jQuery Easing Plugin

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.

 

 HỖ TRỢ TRỰC TUYẾN