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

<div class="m-sidebar">
               <div class="cart">
                   <div id="end" onclick="ajaxForShopCartList()">
                       <span id="carNum">0</span>
                   </div>
               </div>
           </div>

/**************************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 = $('<img class="u-flyer" src="' + img + '">');
   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 = '<div class="product-box"><div class="product-sx"><a><img src="img/mpIds/'
                   + picUrl
                   + '.png" class="product-img" /><span class="product-name">'
                   + shopCarSkuList[b].name
                   + '</span></a><span class="product-price">¥ <span class="price" id="mpid">'
                   + shopCarSkuList[b].price + "\xa0\xa0" + promotionList[b]
                   + '</span></span><div class="product-amount"><div class="product_gw"><span class="product-num">'
                   + shopCarSkuList[b].num
                   + '</span></div></div></div></div>';
           $(".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;
}

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

猜你喜欢