Provides various official and user release code examples. For code reference, you are welcome to exchange and learn this article to introduce the effect of adding jumeiyou to the shopping cart.
The demo and Free Download Links are available at the bottom of the page. If you want to see more
Js Special Effects,
Website source code,
Js tutorialPlease visit [material fire] http://www.sucaihuo.com/js and DEMO, the most important is to download for free.
1,
HTML
First, we place three items:
Width = "220" height = "282"/>
Flowers bloom 2 degrees 2015 new summer Korean version of Bohemian Style Women's long sleeveless loose chiffon Beach
Add to shopping cart
......
Next we place a parabolic image and the floating layer of the shopping cart on the right.
2,
JQuery
$ (". Quick_links_panel li"). mouseenter (function (){
$ (This). children (". mp_tooltip"). animate ({
Left:-92,
Queue: true
});
$ (This). children (". mp_tooltip" ).css ("visibility", "visible ");
$ (This). children (". ibar_login_box" ).css ("display", "block ");
});
$ (". Quick_links_panel li"). mouseleave (function (){
$ (This). children (". mp_tooltip" ).css ("visibility", "hidden ");
$ (This). children (". mp_tooltip"). animate ({
Left:-121,
Queue: true
});
$ (This). children (". ibar_login_box" ).css ("display", "none ");
});
$ (". Quick_toggle li"). mouseover (function (){
$ (This). children (". mp_qrcode"). show ();
});
$ (". Quick_toggle li"). mouseleave (function (){
$ (This). children (". mp_qrcode"). hide ();
});
// Elements and other variables
Var eleFlyElement = document. querySelector ("# flyItem "),
EleShopCart = document. querySelector ("# shopCart ");
Var numberItem = 0;
// Parabolic motion
Var myParabola = funParabola (eleFlyElement, eleShopCart ,{
Velocity: 400,
// Parabolic speed
Curvature: 0.0008,
// Controls the parabolic radians
Complete: function (){
EleFlyElement. style. visibility = "hidden ";
EleShopCart. querySelector ("span"). innerHTML = ++ numberItem;
}
});
// Bind a click event
If (eleFlyElement & eleShopCart ){
[]. Slice. call (document. getElementsByClassName ("btnCart"). forEach (function (button ){
Button. addEventListener ("click ",
Function (event ){
Var src = $ (this). parents ("li"). find ('. p-img'). find ("img"). attr ("src ");
$ ("# FlyItem"). find ("img"). attr ("src", src );
// Scroll size
Var scrollLeft = document.doc umentElement. scrollLeft | document. body. scrollLeft | 0,
ScrollTop = document.doc umentElement. scrollTop | document. body. scrollTop | 0;
EleFlyElement. style. left = event. clientX + scrollLeft + "px ";
EleFlyElement. style. top = event. clientY + scrollTop + "px ";
EleFlyElement. style. visibility = "visible ";
// Relocation required
MyParabola. position (). move ();
});
});
}
See this special effect demo and free download, please visit [material fire]: http://www.sucaihuo.com/js/64.html
AD: truly free, domain name + VM + enterprise mailbox = 0 RMB