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

23/09/2014

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.

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

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.

Chúc các bạn thành công !

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !