jquery implements the fly-in shopping cart function

To achieve the effect:

Idea: Click on the product, the picture will fly into the shopping cart, not only become small, and added to the shopping cart disappeared, not only that, the picture of the product is still in, so we use the method of cloning, added to the shopping cart after clearing the shopping cart can be, and then shopping cart +1
First get the image of the location and size of the product, and put on the body (otherwise fly into the time to see the effect), and then get the orientation of the shopping cart, and finally use the animation effect to achieve the fly-in effect.
Note: How to find a picture of a product, first find the parent element, and then find the location of the picture from the parent element
Prerequisite Preparation:
HTML section:

<div id= "Dpros" > <div class= "Ditem" > <div class= "dpic" > <div class= "Dprice" >￥3499.00</div> <div class= "dinfor" &GT;LG 49lf5400-ca 4 9 inch IPs hard screen rich lucky coin design </div> <div class= "dbtn" ><a href= "javascript:;" > Add to Cart </a></div> </div> <div class= "Ditem" > <div class= "dpic" &GT;&L T;img src= "img/2.jpg"/></div> <div class= "Dprice" >￥3499.00</div> <div class = "Dinfor" >hisense/Hisense LED50T1A Hisense TV official flagship store </div> <div class= "dbtn" ><a href= "javascript:;"              > Add to Cart </a></div> </div> <div class= "Ditem" > <div class= "Dpic" >  </div> <div class= "Dprice" >￥3499.00</div&gt            ; <div class= "Dinfor" &GT;LG 49lf5400-ca 49 inch IPs hard Screen rich recruitCoins design </div> <div class= "dbtn" ><a href= "javascript:;" > Add to Cart </a></div> </div> <div class= "Ditem" > <div class= "dpic" &GT;&L T;img src= "img/1.jpg"/></div> <div class= "Dprice" >￥3499.00</div> <div class = "Dinfor" &GT;LG 49lf5400-ca 49 inch IPs hard screen rich lucky coin design </div> <div class= "dbtn" ><a href= "javascript:;" > Add to Cart </a></div> </div> <div class= "Ditem" > <div class= "dpic" &GT;&L T;img src= "img/2.jpg"/></div> <div class= "Dprice" >￥3499.00</div> <div class = "Dinfor" >hisense/Hisense LED50T1A Hisense TV official flagship store </div> <div class= "dbtn" ><a href= "javascript:;" > Add to Cart </a></div> </div> <div class= "Ditem" > <div class= "dpic" &GT;&L T;img src= "img/3.jpg"/></div> <div class= "Dprice" >￥3499.00</div> <div class= "Dinfor" &GT;LG 49lf5400-ca 49 inch IPs hard screen rich lucky coin design </div> <div clas s= "dbtn" ><a href= "javascript:;" > Add to Cart </a></div> </div> </div> <div id= "Dcar" > <div id= "Dprocount" >0</div> </div>

CSS section:

*{    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 section: Focus

var iCount = 0;  The shopping cart variable, used to increase the number of shopping cart temporary variable $ (function () {$ (". Dbtn"). Click (function () {//click on "Add to Cart" trigger event icount++;  Click once on the +1 var addimg = $ (this). Parent (). Find (". Dpic"). FIND ("img");  Find the picture of the product var cloneimg = Addimg.clone (); Clone the image Cloneimg.css ({//Clone style "width": "250px", "height": "250px", "Pos Ition ":" Absolute ",//Absolute positioning" left ": Addimg.offset (). Left,//the left position of the picture" top ": Addimg.offset (), to        P,//the top position of the picture "Z-index": "200",//level, bigger more on "opacity": "0.5"//transparency Translucent        }); Clone to Body on cart location Cloneimg.appendto ($ ("body")). Animate ({"width": "50px",//width "height" after cloning: "50   PX ",//Wide" left "after cloning: $ (" #dcar "). Offset (). Left,//left position after cloning the cart" top ": $ (" #dcar "). Offset (). Top,   After cloning the left position shopping cart},1000,function () {//After cloning $ ("#dprocount"). HTML (iCount); Number of Shopping carts +1 $ (this). Remove ();     Empty cart does not clear the image will overlay}); });});

Download Link: Link: https://pan.baidu.com/s/17VyaK8vAuBsrHPCDl5dFLw Password: v820

jquery implements the fly-in shopping cart function