jquery to add to the shopping cart to fly into the animation effect

When you browse your favorite items on the e-commerce shopping site, you can click on the "Add To Cart" button on the page to add items to your shopping cart. This article describes the effect of using a jquery-based animation plugin to add a product to the right side of the shopping cart when you click the Join Cart button.

Html

First load the jquery library file and the Jquery.fly.min.js plugin.

<script src="jquery.js"></script> <script src="  Jquery.fly.min.js"

Next, the product information HTML structure is arranged, in this case, we use four items side-by-side arrangement, each product box includes the product picture, price, name and add Shopping cart button and other information.

<divclass="Box"> "images/lg.jpg"Width=" the"height=" the"> 3499.00</span>"#" class="Button Orange Addcar"> Add to Cart </a> </div> <divclass="Box"> "images/hs.jpg"Width=" the"height=" the"> 3799.00</span>"#" class="Button Orange Addcar"> Add to Cart </a> </div> <divclass="Box"> "images/cw.jpg"Width=" the"height=" the"> 3999.00</span>"#" class="Button Orange Addcar"> Add to Cart </a> </div> <divclass="Box"> "images/ls.jpg"Width=" the"height=" the"> 6969.00</span>"#" class="Button Orange Addcar"> Add to Cart </a> </div>

Then we also need to add the shopping cart and the message to the right of the page.

class="m-sidebar">     class="cart" >         <i id="end"></i>         <span> shopping cart </span>     </div> </div> <div id="msg"

Css

We use CSS first to arrange the items to beautify, and then set the right shopping cart style, see the code:

. box{float: Left; width:198px; height:320px; margin-left:5px; border:1px solid #e0e0e0; text-align:center}. Box P{line-height:20px; padding:4px 4px 10px 4px; text-Align:left}. box:hover{border:1px solid #f90}. Box H4{line-height:32px; font-size:14px; Color: #f30; Font-weight: -}. Box H4 Span{font-size:20px}. U-flyer{display:block;width:50px;height:50px;border-radius:50px;position:fixed; Z-index:9999;} . M-sidebar{position:fixed; Top:0; Right:0; Background: # the; Z-index: -; Width:35px;height: -%;font-size:12px;color: #fff;} . Cart{color: #fff; text-align:center;line-height:20px;padding:200px0 00px;} . Cart Span{display:block;width:20px;margin:0Auto;} . Cart I{width:35px;height:35px;display:block; Background:url (car.png) No-repeat;} #msg {position:fixed; top:300px; right:35px; Z-index:10000; width:1px; height:52px; line-height:52px; font-size:20px; Text-align:center; Color: #fff; background:# the; Display:none}

Jquery

The effect we want to achieve is that when the user clicks on the "Add To Cart" button, the current product image will become a smaller sphere, with the button as the starting point, to the right to fly out in the form of a parabola, and finally fall into the shopping cart on the right side of the page, and prompt operation is successful. Before flying out, we want to get the picture of the current product, then call the Fly plugin, then the parabolic trajectory is done by the fly plug-in, we just need to define the starting point and the end point and other parameters.

<script>$ (function () {varOffset = $ ("#end"). offset (); $(". Addcar"). Click (Function (Event){         varAddcar = $ ( This); varimg = addcar.parent (). Find ('img'). attr ('src'); varFlyer = $ (' "'+img+'">'); Flyer.fly ({start: {left:Event. PageX,//starting position (required) #fly元素会被设置成position: fixedTopEvent. pagey//start position (required)}, End: {left:offset.left+Ten,//End Position (required)top:offset.top+Ten,//End Position (required)Width0,//Width at endHeight0 //Height at end}, Onend:function () {//End Callback$("#msg"). Show (). Animate ({width:'250px'}, $). FadeOut ( +);//Prompt InformationADDCAR.CSS ("cursor","default"). Removeclass ('Orange'). Unbind ('Click');  This. Destory ();//Remove Dom            }         }); }); }); </script>

Copy the above code, save and run to see the effect, fly plug-in project official website address is: https://github.com/amibug/fly, it is worth mentioning is, IE10 below need to add the following JS:

<script src="requestAnimationFrame.js"></script> 

Reprint: http://www.helloweba.com/view-blog-294.html
Code: Https://github.com/amibug/fly

jquery to add to the shopping cart to fly into the animation effect