jQuery实现飞入购物车功能

要实现的效果:
　　& lt; div类=" dprice "祝辞￥3499.00 & lt;/div> 　　& lt; div类=" dInfor "祝辞LG 49 lf5400-ca 49寸IPS硬屏富贵招财铜钱设计& lt;/div> 　　& lt; div类=" dbtn "祝辞& lt; a href=" javascript:,“在加入购物车& lt;/a> & lt;/div> 　　& lt;/div> 　　& lt; div类=癲item”比; 　　& lt; div类=" dpic "祝辞& lt; img src=" https://www.yisu.com/zixun/img/2.jpg "/祝辞& lt;/div> 　　& lt; div类=" dprice "祝辞￥3499.00 & lt;/div> 　　& lt; div类=" dInfor "在海信/海信LED50T1A海信电视官方旗舰店& lt;/div> 　　& lt; div类=" dbtn "祝辞& lt; a href=" javascript:,“在加入购物车& lt;/a> & lt;/div> 　　& lt;/div> 　　& lt; div类=癲item”比; 　　& lt; div类=癲pic”比; 　　& lt; img src=" https://www.yisu.com/zixun/img/3.jpg "/比; 　　& lt;/div> 　　& lt; div类=" dprice "祝辞￥3499.00 & lt;/div> 　　& lt; div类=" dInfor "祝辞LG 49 lf5400-ca 49寸IPS硬屏富贵招财铜钱设计& lt;/div> 　　& lt; div类=" dbtn "祝辞& lt; a href=" javascript:,“在加入购物车& lt;/a> & lt;/div> 　　& lt;/div> 　　& lt; div类=癲item”比; 　　& lt; div类=" dpic "祝辞& lt; img src=" https://www.yisu.com/zixun/img/1.jpg "/祝辞& lt;/div> 　　& lt; div类=" dprice "祝辞￥3499.00 & lt;/div> 　　& lt; div类=" dInfor "祝辞LG 49 lf5400-ca 49寸IPS硬屏富贵招财铜钱设计& lt;/div> 　　& lt; div类=" dbtn "祝辞& lt; a href=" javascript:,“在加入购物车& lt;/a> & lt;/div> 　　& lt;/div> 　　& lt; div类=癲item”比; 　　& lt; div类=" dpic "祝辞& lt; img src=" https://www.yisu.com/zixun/img/2.jpg "/祝辞& lt;/div> 　　& lt; div类=" dprice "祝辞￥3499.00 & lt;/div> 　　& lt; div类=" dInfor "在海信/海信LED50T1A海信电视官方旗舰店& lt;/div> 　　& lt; div类=" dbtn "祝辞& lt; a href=" javascript:,“在加入购物车& lt;/a> & lt;/div> 　　& lt;/div> 　　& lt; div类=癲item”比; 　　& lt; div类=" dpic "祝辞& lt; img src=" https://www.yisu.com/zixun/img/3.jpg "/祝辞& lt;/div> 　　& lt; div类=" dprice "祝辞￥3499.00 & lt;/div> 　　& lt; div类=" dInfor "祝辞LG 49 lf5400-ca 49寸IPS硬屏富贵招财铜钱设计& lt;/div> 　　& lt; div类=" dbtn "祝辞& lt; a href=" javascript:,“在加入购物车& lt;/a> & lt;/div> 　　& lt;/div> 　　& lt;/div> 　　& lt; div id=癲car”比; 　　& lt; div id=" dprocount "祝辞0 & lt;/div> 　　& lt;/div> 　　

css部分:

 <代码> * {
　　填充:0 px;
　　保证金:0 px;
　　字体类型:“微软雅黑”;
　　}
　　一个{
　　文字修饰:没有,/*取消超链接的样式*/}
　　.ditem {
　　宽度:220 px;
　　身高:352 px;
　　边界:固体1 px # ccc;
　　浮:左;
　　保证金:0 px 5 px;
　　字体大小:14 px;
　　margin-top: 10 px;
　　}
　　# dpros {
　　宽度:750 px;
　　}
　　.dprice {
　　高度:30 px;
　　宽度:100%;
　　text-align:中心;
　　颜色:# f00;
　　字体大小:20 px;
　　粗细:900;
　　}
　　.dbtn一个{/* margin-top: 10 px; */宽度:150 px;
　　高度:36 px;
　　background - color: # ff6a00;
　　显示:块;
　　text-align:中心;
　　行高:36 px;
　　颜色:# fff;
　　字体大小:20 px;
　　保证金:10 px汽车;
　　border - radius: 12 px;
　　}
　　# dcar {
　　前:300像素;
　　位置:绝对的;
　　
　　右:0 px;
　　宽度:72 px;
　　身高:63 px;
　　背景图片:url (. ./img/car.jpg);
　　}
　　# dprocount {
　　宽度:20 px;
　　高度:20 px;
　　background - color: # f00;
　　颜色:# fff;
　　字体大小:12 px;
　　这个特性:100%;
　　text-align:中心;
　　行高:20 px;
　　} 

jQuery部分:<强>重点

 <代码> var iCount=0;//购物车的变量,用来增加购物车的数量的临时变量
　　$(函数(){
　　$ (" .dbtn ") .click(函数(){//点击”加入购物车“触发时事件
　　iCount + +;//点击一次就+ 1
　　var碱=$(这).parent (); (“.dpic”); (img);//找到该商品的图片
　　var cloneImg=addImg.clone ();//对该图片进行克隆
　　cloneImg。css({//克隆的样式
　　“宽度”:“250 px”,
　　“高度”:“250 px”,
　　“位置”:“绝对”,//绝对定位
　　“左”:addImg.offset ()。,//该图片的左位置
　　“顶级”:addImg.offset(),,//该图片的最高位置
　　“z - index”:“200”,//层级,越大越在上
　　“不透明度”:“0.5”//透明度半透明
　　}）；//克隆到身体上的购物车位置
　　cloneImg.appendTo($(“身体”)).animate ({
　　“宽度”:“50 px”//克隆后的宽
　　“高度”:“50 px”//克隆后的宽
　　“左”:$ (" # dcar ") .offset ()。,//克隆后的左位置购物车
　　“顶级”:$ (" # dcar ") .offset ()。,//克隆后的左位置购物车
　　1000年},函数(){//克隆后
　　$ (" # dprocount ") . html (iCount);//购物车上的数+ 1
　　(美元).remove ();//清空购物车不清除图片会叠加
　　}）；
　　}）；
　　});
jQuery实现飞入购物车功能