jQuery插件Add2Cart添加到购物车实现javascript动态提示添加到购物车效果

经常看到在一些购物类网站提供把产品添加到购物车的动态添加提示效果，把产品添加到购物车的提示效果实质是实现一个把产品原图大小的图片添加到购物 车图片上的动画，增加一个产品原图具有阴影效果的图片放在购物车上，jQuery插件Add2Card可实现添加到购物车功能，具体大家可查看一下演示：

Add2Cart添加到购物车demo

下载Add2Cart添加到购物车js代码

简单使用实例
一，包含文件部分

1. <script src="jquery-1.3.1.js" type="text/javascript"></script>
2. <script src="jquery.add2cart.js" type="text/javascript"></script>

二，CSS样式文件部分
添加CSS样式，增加图片展示效果
img {border:none;}

二，html部分

1. <div>jQuery插件Add2Cart测试实例 biuuu.com</div>
2. <div>
3. <img id="product_air" src="product.png" width="180" height="91" />
4. </div>
5. <div>
6. <a onclick="return false" href="#"><img id="cart" src="cart.jpg" width="144" height="144" /></a>
7. </div>
8. <input onclick="$.add2cart( 'product_air', 'cart'  )" type="button" value="添加到购物车" />

实例非常简单，一张产品图和一张购物车图，当点击添加到购物车按钮后触发添加效果，大家可看看add2card源代码，非常简单，代码如上：

1. (function($) {
2. $.extend({
3. add2cart: function(source_id, target_id, callback) {
4. var source = $('#' + source_id );
5. var target = $('#' + target_id );
6. var shadow = $('#' + source_id + '_shadow');
7. if( !shadow.attr('id') ) {
8. $('body').prepend('<div id="'+source.attr('id')+'_shadow" style="display: none; background-color: #ddd; border: solid 1px
9. darkgray; position: static; top: 0px; z-index: 100000;">&nbsp;</div>');
10. var shadow = $('#'+source.attr('id')+'_shadow');
11. }
12. if( !shadow ) {
13. alert('Cannot create the shadow div');
14. }
15. shadow.width(source.css('width')).height(source.css('height')).css('top', source.offset().top).css('left', source.offset
16. ().left).css('opacity', 0.5).show();
17. shadow.css('position', 'absolute');
18. shadow.animate( { width: target.innerWidth(), height: target.innerHeight(), top: target.offset().top, left: target.offset
19. ().left }, { duration: 300 } )
20. .animate( { opacity: 0 }, { duration: 100, complete: callback } );
21. }
22. });
23. })(jQuery);

从add2card源代码可知实现添加到购物车效果过程如下：
1，创建一个实现效果的DIV层，如上：shadow
2，给shadow 添加CSS效果，实现添加到购物车样式。
3，添加动画animate，从产品source_id原图到购物车target_id的CSS样式变化过程。