html 购物车动画效果,Jquery商品飞入购物车动画效果实例展示

刚接手一个小玩意，值得收藏分享给大家！

《产品图片飞入购物车的jQuery动画》

无标题文档

*{ margin:0; padding:0;}

.good-area{ width:200px; position:absolute; left:100px; top:50px;}

.good{ width:200px; height:180px; background:#ccc;}

.good img{ width:100%; height:100%;}

.shop_car{ width:100px; height:30px; line-height:30px; text-align:center; position:absolute; left:1000px; top:300px; background:#eee; color:red;}

#add_shopcar{ height:20px; line-height:20px; text-align:center; color:#03F; background:#F90;}

(function(){

var shop_car=$('#shop_car'),

carLeft=shop_car.offset().left,

carTop=shop_car.offset().top;

/**

*为所有购买按钮增加动画效果

**/

$('.add_shopcar').click(function(){

var good=$(this).parent().find('.good'),

goodLeft=good.offset().left,

goodTop=good.offset().top;

if(good.is(':animated')){

return;

}

var copyGood=good.clone();

$('body').append(copyGood);

copyGood.css({position:'absolute',left:goodLeft,top:goodTop,border:'5px #f00 solid'});

copyGood.animate({width:80,height:80,left:carLeft,top:carTop,opacity:1},800,function(){

copyGood.remove();

});

});

})();