jQuery教程---20行代码的购物车效果

　　
　　

演示：
http://www.cssrain.cn/demo/addCart/cart1.html

 

代码注释：
$(function(){
        $("#productlist ul li a").click(function(){
              //删除页面中已经有的 阴影
              $("#cart_shadow").remove();
              //创建阴影div
              var $shadow = $('<div id="cart_shadow" style="display: none; background-color: #bbb; border:1px solid #aaa;z-index: 9999;"> </div>').prependTo("body");       
              //获取当前点击的前一个img标签
              var $img = $(this).prev("img");
              //利用img标签的宽度，高度，上边距等属性来设置阴影div
              $shadow.css({
                        'width' : $img.css('width'),
                        'height': $img.css('height') ,
                        'position' : 'absolute',
                        'top' : $img.offset().top,
                        'left' : $img.offset().left,
                        'opacity' : 0.6                
                     })
                     .show();

              //获取购物车标签
              var $cart = $("#cart");
              //利用购物车表情按的宽度，高度，上边距等属性来设置阴影div的动画效果
              $shadow.animate({
                          width: $cart.innerWidth(),
                          height: $cart.innerHeight(),
                          top: $cart.offset().top,
                          left: $cart.offset().left,
                          opacity: 0
                     },  { duration: 600 , complete: function(){
                             $cart.append("<div>"+$img.attr('alt') +" 添加成功.</div>");
                         }
                     })
            //阻止超链接跳转
            return false;
        });
    });

本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=1311