要实现的效果：
思路：点击商品，图片就会飞入购物车，不但变小，而且加入到购物车后消失 了，不但如此，商品的图片还在，所以我们使用克隆的方法，加入到购物车后清除购物车即可，然后购物车+1
首先获取商品图片的位置及大小，并放到body上（否则飞入的时候看不到效果），然后获取购物车的方位，最后使用动画效果实现飞入效果。
注意：怎么找商品的图片，先找父元素，再从父元素下找图片的位置
前提准备：
html部分：
西秀ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！
0
css部分：
*{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
a{
text-decoration:none;/*取消超链接的样式*/
}
.ditem{
width:220px;
height:352px;
border:solid 1px #ccc;
float:left;
margin:0px 5px;
font-size:14px;
margin-top:10px;
}
#dpros{
width:750px;
}
.dprice{
height:30px;
width:100%;
text-align:center;
color:#f00;
font-size:20px;
font-weight:900;
}
.dbtn a{
/*margin-top:10px;*/
width:150px;
height:36px;
background-color:#ff6a00;
display:block;
text-align:center;
line-height:36px;
color:#fff;
font-size:20px;
margin:10px auto;
border-radius:12px;
}
#dcar{
top:300px;
position:absolute;
right:0px;
width:72px;
height:63px;
background-image:url("../img/car.jpg");
}
#dprocount{
width:20px;
height:20px;
background-color:#f00;
color:#fff;
font-size:12px;
border-radius:100%;
text-align:center;
line-height:20px;
}jQuery部分：重点
var iCount = 0; //购物车的变量，用来增加购物车的数量的临时变量
$(function(){
$(".dbtn").click(function(){ //点击“加入购物车”触发时事件
iCount++; //点击一次就+1
var addImg = $(this).parent().find(".dpic").find("img"); //找到该商品的图片
var cloneImg = addImg.clone(); //对该图片进行克隆
cloneImg.css({ //克隆的样式
"width": "250px",
"height": "250px",
"position":"absolute", //绝对定位
"left":addImg.offset().left, //该图片的left位置
"top":addImg.offset(),top, //该图片的top位置
"z-index":"200", //层级，越大越在上
"opacity":"0.5" //透明度 半透明
});
//克隆到body上的购物车位置
cloneImg.appendTo($("body")).animate({
"width":"50px", //克隆后的宽
"height":"50px", //克隆后的宽
"left":$("#dcar").offset().left, //克隆后的left位置 购物车
"top": $("#dcar").offset().top, //克隆后的left位置 购物车
},1000,function(){ //克隆后
$("#dprocount").html(iCount); //购物车上的数 +1
$(this).remove(); //清空购物车 不清除图片会叠加
});
});
});下载链接：链接：https://pan.baidu.com/s/17VyaK8vAuBsrHPCDl5dFLw 密码：v820