加入购物车的飞入动画、购物车列表模板

                

                    

                        0
                    

                

            

            

 

/**************************add car start***************************************/
.u-flyer {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    position: fixed;
    z-index: 9999;
}
.m-sidebar {
    position: absolute;
    display: none;
    top: 0;
    right: 0.5rem;
    /*background: #000;*/
    /*z-index: 2000;*/
    width: 35px;
    height: 100%;
    font-size: 0.7rem;
    color: #fff;
}

#end{
    position: absolute;
    width: 52.5px;
    height: 46.5px;
    background-image: url(../img/ui-shopCar-icon.png);
    /*background-color: #FFFFFF;*/
    border-radius: 25px;
    background-size: 100% 100%;
    pointer-events:auto;
}
.cart {
    position: absolute;
    /*color: #fff;*/
    text-align: center;
    line-height: 20px;
    padding: 600px 0 0 0px;
    bottom: 3.3rem;
}

.cart span {
    position: absolute;
    display: block;
    width: 20px;
    margin: 0 auto;
    top: -0.2rem;
    left: -0.5rem;
    background-color: #a71818;
    border-radius: 10px;
    border: 0.5px solid white;
}

.cart i {
    width: 35px;
    height: 35px;
    display: block;
}

#msg {
    position: fixed;
    top: 50%;
    right: 50%;
    z-index: 10000;
    margin-right: -6rem;
    border-radius: 5rem;
    width: 1px;
    height: 52px;
    line-height: 52px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    background: #360;
    display: none
}
/**************************add car end***************************************/

 

/*
 * 7、加入购物车，飞入动画
 */
var currNum = 0;
function addCarAni(x, y){
    var offset = $("#end").offset();
    var img = document.getElementById("carImg").src;
    var flyer = $('');
    flyer.fly({
        start: {
            left: x, //开始位置（必填）#fly元素会被设置成position: fixed 
            top: y //开始位置（必填） 
        },
        end: {
            left: offset.left + 10, //结束位置（必填） 
            top: offset.top + 10, //结束位置（必填） 
            width: 0, //结束时宽度 
            height: 0 //结束时高度 
        },
        onEnd: function() { //结束回调 
//            $("#msg").show().animate({
//                width: '250px'
//            }, 200).fadeOut(1000); //提示信息 
            currNum ++;
            shopTotalNum(currNum);
            flyer.remove(); //移除dom
            ajaxForShopCartAllNum();
            isAdded = false
        }
    });
}

 

//购物车列表模板

for(var b = 0; b < shopCarSkuList.length; b++) {
            var picUrl = shopCarSkuList[b].productId;
            var descs = shopCarSkuList[b];
            var a = '

'
                    + shopCarSkuList[b].name
                    + '¥ ' 
                    + shopCarSkuList[b].price + "\xa0\xa0" + promotionList[b]
                    + '

'
                    + shopCarSkuList[b].num
                    + '

';
            $(".pop-content-type2-list").append(a);
//            GetGoodDescs(shopCarSkuList[b].mpId)
        }

 

CSS:

.product-box {
    width: 98%;
    height: 3.8rem;
    position: relative;
    /*background-color: #ffffff61;*/
}

.product-box .product-ckb {
    width: 3rem;
    height: 100%;
    display: inline-block;
    float: left;
    text-align: center;
    line-height: 5.9rem;
    z-index: 99;
    position: absolute
}

.product-ckb em {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 1px solid #B8B4B4;
    display: inline-block;
    cursor: pointer
}

.product-ckb .product-xz {
    background: url(../img/gouico.png) no-repeat 0 0;
    background-size: 1.1rem;
    border: 0;
    display: inline-block
}

.product-sx {
    float: left;
    height: 3.8rem;
    padding: .6rem 0;
    border-bottom: 1.3px solid #716262;
    /*padding-left: 3rem;*/
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
}

.product-sx .product-img {
    width: 1.387rem;
    height: 3.547rem;
    display: inline-block;
    float: left;
    margin-top: -0.5rem;
}

.product-sx .product-name {
    font-size: .5rem;
    color: #3e2a2a;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    padding-left: 10px;
    text-align: left;
}

.product-sx .product-price {
    /*font-size: 0.8rem;*/
    color: #99123e;
    /*margin: 20px 0 0 25px;*/
    bottom: 0rem;
    left: 50%;
    margin-left: -5.5rem;
    display: inline-block;
    float: left;
    width: 10rem;
    overflow: hidden;
    position: absolute;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    padding-left: 10px;
    text-align: left;
}

.product-price .price{
    /*font-size: 1rem;*/
    /*color: #99123e;*/
}

.product-amount {
    position: absolute;
    right: 5px;
    bottom: 1px;
}

.product_gw {
    /*border: 1px solid #dbdbdb;*/
    width: 110px;
    line-height: 25px;
    overflow: hidden;
    font-size: 25px;
}

.product_gw em {
    display: block;
    height: 25px;
    width: 35px;
    float: right;
    color: #7A7979;
    border-right: 1px solid #dbdbdb;
    text-align: center;
    cursor: pointer;
}

.product_gw .product-num {
    display: block;
    float: right;
    text-align: center;
    width: 38px;
    font-style: normal;
    /*font-size: 20px;*/
    line-height: 25px;
    border: 0;
    pointer-events: none;
    color: #000000;
}

.product_gw em.product-add {
    float: right;
    border-right: 0;
    border-left: 1px solid #dbdbdb
}

.product-del {
    width: 1.15rem;
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 8px;
    cursor: pointer;
}