一个简单jQuery加入购物车的动画效果

jiarugouwuche

分享一个简单jQuery加入购物车动画效果,代码非常简单,懂点jQuery的就能看懂。

当然,如果你需要更好看的效果,可以自己发挥货自己找这方面的插件吧。

HTML


<div class="gwc-c"><img src="http://ico.ooopic.com/iconset01/symbolize-icons/gif/113031.gif"/></div>
<div class="content"><img src="http://demo.lanrenzhijia.com/2015/pic0622/images/big_1.jpg" class="goods" /></div>
<div class="content"><img src="http://demo.lanrenzhijia.com/2015/pic0622/images/big_2.jpg" class="goods" /></div>
<div class="content"><img src="http://demo.lanrenzhijia.com/2015/pic0622/images/big_3.jpg" class="goods" /></div>
<div class="content"><img src="http://demo.lanrenzhijia.com/2015/pic0622/images/big_4.jpg" class="goods" /></div>
<div class="content"><img src="http://demo.lanrenzhijia.com/2015/pic0622/images/big_5.jpg" class="goods" /></div>
<div class="content"><img src="http://demo.lanrenzhijia.com/2015/pic0622/images/big_6.jpg" class="goods" /></div>
<div class="content"><img src="http://demo.lanrenzhijia.com/2015/pic0622/images/big_7.jpg" class="goods" /></div>
<div class="content"><img src="http://demo.lanrenzhijia.com/2015/pic0622/images/big_8.jpg" class="goods" /></div>

CSS


*{margin:0;padding:0;list-style: none;}
.content{margin: 20px auto;position: relative;cursor:pointer;}
.gwc-c{width: 50px;height: 50px;position: fixed;right: 0;bottom: 100px;}
.gwc-c img{width:100%;}

jQuery

$(function(){
	$('.goods').click(function(){
		var flyElm = $(this).clone().css('opacity','0.8');
		flyElm.css({
			'z-index': 9000,
			'display': 'block',
			'position': 'absolute',
			'top': $(this).offset().top +'px',
			'left': $(this).offset().left +'px',
			'width': $(this).width() +'px',
			'height': $(this).height() +'px'
		});
		$('body').append(flyElm);
		flyElm.animate({
			top:$('.gwc-c').offset().top,
			left:$('.gwc-c').offset().left,
			width:2,
			height:2,
		},600,function(){
			flyElm.remove();
		});
	});
});