jquery implementation join the shopping cart fly into the animation effect _jquery

Html

First load the jquery library file and the Jquery.fly.min.js plug-in.

Copy Code code as follows:

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

Next, the product information HTML structure is arranged, in this example, we use four of products side by side, each item box includes the product picture, price, name and add the cart button and other information.

Copy Code code as follows:

<div class= "box" >

&LT;P&GT;LG 49LF5400-CA 49-inch IPs hard screen rich money coin design </p>
<a href= "#" class= "button Orange Addcar" > Add Shopping Cart </a>
</div>
<div class= "box" >

<p>hisense/Hisense LED50T1A Hisense TV official flagship store </p>
<a href= "#" class= "button Orange Addcar" > Add Shopping Cart </a>
</div>
<div class= "box" >

<p>skyworth/Skyworth 50e8eus 8 core 4Kj Cool Open System intelligent LCD TV </p>
<a href= "#" class= "button Orange Addcar" > Add Shopping Cart </a>
</div>
<div class= "box" >

<p> video tv LeTV x60s 4 core 1080P HD 3D android smart Super TV </p>
<a href= "#" class= "button Orange Addcar" > Add Shopping Cart </a>
</div>

Then, we also need to add the shopping cart and the hint information to the right of the page.

Copy Code code as follows:

<div class= "M-sidebar" >
<div class= "Cart" >
<i id= "End" ></i>
<span> Shopping Cart </span>
</div>
</div>
<div id= "MSG" > has been successfully added to the shopping cart! </div>

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

Copy Code code as follows:

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:500}
. 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: #000; z-index:2000;width:35px;height:100%;font-size:12px; Color: #fff;}
. Cart{color: #fff; text-align:center;line-height:20px;padding:200px 0 0 0px;}
. Cart span{display:block;width:20px;margin:0 Auto;
. 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: #360; Display:none}

Jquery

The effect we want to achieve is that when the user clicks on the "Add To Cart" button, the current product picture will turn into a shrinking sphere, with the button as the starting point, to the right to the parabolic form, and finally fall into the shopping cart on the right side of the page, and prompt operation success. Before flying out, we want to get the picture of the current product, and then call the Fly plug-in, after the parabola trajectory are completed by the fly plug-in, we only need to define the starting point and endpoint parameters can be.

Copy Code code as follows:

<script>
$ (function () {
var offset = $ ("#end"). Offset ();
$ (". Addcar"). Click (Function (event) {
var Addcar = $ (this);
var img = addcar.parent (). FIND (' img '). attr (' src ');
var flyer = $ (' ');
Flyer.fly ({
Start: {
Left:event.pageX,//Starting position (required) #fly元素会被设置成position: fixed
Top:event.pageY//Start position (required)
},
End: {
LEFT:OFFSET.LEFT+10,//End position (required)
TOP:OFFSET.TOP+10,//End position (required)
width:0,//End width
height:0//End Height
},
Onend:function () {//End callback
$ ("#msg"). Show (). Animate ({width: ' 250px '}, MB). fadeout (1000); Hint Information
ADDCAR.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, IE10 the following need to add the following JS:

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

The above is the entire content of this article, I hope you can enjoy