jQuery实现飞入购物车功能

Posted 2020-11-14

要实现的效果：

思路：点击商品，图片就会飞入购物车，不但变小，而且加入到购物车后消失 了，不但如此，商品的图片还在，所以我们使用克隆的方法，加入到购物车后清除购物车即可，然后购物车+1
首先获取商品图片的位置及大小，并放到body上（否则飞入的时候看不到效果），然后获取购物车的方位，最后使用动画效果实现飞入效果。
注意：怎么找商品的图片，先找父元素，再从父元素下找图片的位置
前提准备：
html部分：

<div id="dpros">
        <div class="ditem">
            <div class="dpic"><img src="img/1.jpg" /></div>
            <div class="dprice">￥3499.00</div>
            <div class="dInfor">LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</div>
            <div class="dbtn"><a href="javascript:;">加入购物车</a></div>
        </div>
        <div class="ditem">
            <div class="dpic"><img src="img/2.jpg" /></div>
            <div class="dprice">￥3499.00</div>
            <div class="dInfor">Hisense/海信 LED50T1A 海信电视官方旗舰店</div>
            <div class="dbtn"><a href="javascript:;">加入购物车</a></div>
        </div>
        <div class="ditem">
            <div class="dpic">
              <img src="img/3.jpg" />
            </div>
            <div class="dprice">￥3499.00</div>
            <div class="dInfor">LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</div>
            <div class="dbtn"><a href="javascript:;">加入购物车</a></div>
        </div>
        <div class="ditem">
            <div class="dpic"><img src="img/1.jpg" /></div>
            <div class="dprice">￥3499.00</div>
            <div class="dInfor">LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</div>
            <div class="dbtn"><a href="javascript:;">加入购物车</a></div>
        </div>
        <div class="ditem">
            <div class="dpic"><img src="img/2.jpg" /></div>
            <div class="dprice">￥3499.00</div>
            <div class="dInfor">Hisense/海信 LED50T1A 海信电视官方旗舰店</div>
            <div class="dbtn"><a href="javascript:;">加入购物车</a></div>
        </div>
        <div class="ditem">
            <div class="dpic"><img src="img/3.jpg" /></div>
            <div class="dprice">￥3499.00</div>
            <div class="dInfor">LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</div>
            <div class="dbtn"><a href="javascript:;">加入购物车</a></div>
        </div>
    </div>
    <div id="dcar">
        <div id="dprocount">0</div>
    </div>

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