Effect of adding jQuery imitation jumei.com to shopping cart

Source: Internet
Author: User
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

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.