Web Front end Practical case-shopping cart parabolic effect

Knowledge points: Static layout tips, positioning, floating, background settings, CSS style selector javascript effects, jquery library calls, plug-in calls, if using plugins, programming thinking and tricks.

HTML code:

    <div class= "banner" ></div> <!--head Banner production end--> <!--product List area start--> <div class= "p Ar_list "> <ul> <li>  <p class= "title" >2015 Summer new Hailan Home Mens genuine 1</p> <p class= "JG" ><font                >￥193.0</font><span> Add to Cart </span></p> </li> <li>  <p class=" title ">2015 Summer new Hailan House mens            Product 2</p> <p class= "JG" ><font>￥175.0</font><span> add to Cart </span></p> </li> <li> 2015 Summer new Hailan Home Mens genuine 3</p> <p class= "JG" ><font>￥389.0</font><s Pan> add to Cart </span></p> </li> <li>  <p class= "title" >2015 Summer new Hailan Home Mens Genuine 4</p> <p Class= "JG" ><font>￥499.0</font><span> add to Shopping cart </span></p> </li> </u            L> </div> <!--product List Area end--> <!--shopping cart start--> <div class= "Carbox" > <div class= "left" ><span> added shopping cart </span></div> <div class= "Con" > <!                    --<dl> <dt></dt> <dd class= "Ti" >2015 summer new Hailan Home Mens genuine 1</dd> <dd class= "Money" >￥193.0</dd&                    Gt </dl>--> </div> </div>

CSS code:

    <style type= "Text/css" > *{margin:0;padding:0;}    . Banner{width:100%;height:160px;background:url ("images/banner.jpg") center top;}    . par_list{width:990px;height:310px;margin:40px Auto;}            . par_list ul li{width:220px;height:300px;border:1px solid #ddd; list-style-type:none; float:left;margin:0    7px;padding:5px;    }. Par_list ul li P.title{color: #666; font-size:12px;line-height:40px;}    . par_list ul Li P.jg{color:red;}            . par_list ul Li P.jg span{float:right;width:80px;height:30px;background:red;color: #fff;            Line-height:30px;font-size:12px;text-align:center;    border-radius:5px;            }. carbox{width:260px;height:100%;background:green;position:fixed;     top:0;right:-220px;            }. Carbox. Left{width:40px;height:100%;background: #000;p osition:relative;    Float:left;            }. Carbox left Span{color: #fff; font-size:12px;width:12px;display:block;background:red; padding:10px 14px;position:absolute;top:50%;left:0;margin-top:-42px;    }. Carbox. Con{width:220px;height:100%;background: #ddd; float:left;}    . Carbox Con dl{width:200px;height:60px;border-bottom:1px solid #fff;p adding:10px;}    . carbox con dl dt{width:60px;height:60px;float:left;}    . carbox con dl dd{width:120px;float:right;font-size:12px;line-height:20px;margin-right:10px;} </style>

JavaScript code:

    <script src= "Js/jquery.js" ></script> <script src= "Js/tz_fly.js" ></script> <script>    var k = 0;            $ (". Carbox. Left span"). Click (function () {if (k==0) {$ (". Carbox"). Animate ({right: "0px"},500);        k=1;            }else if (k==1) {$ (". Carbox"). Animate ({right: " -220px"},500);        k=0;    }    });        $ (". Par_list ul Li P.jg span"). Click (function () {var img = $ (this). Parent (). Siblings ("IMG"). attr ("src");        var text = $ (this). Parent (). Siblings ("P.title"). html ();        var = $ (this). Siblings ("Font"). html (); $ (". Con"). Append ("<dl><dt></dt><dd        Class= ' ti ' > ' +text+ ' </dd><dd class= ' money ' > ' +money+ ' </dd></dl> ');    Play (event); })//Parabolic function play (event) {var s_left =event.clientx;//get mouse left position var s_top =event.clienty;//get Mouse Left position var e_left =$ (". CarboX. Left span "). Offset (). Left;        var e_top =$ (". Carbox. Left span"). Offset (). Top;        var _this =$ (Event.target);//Current to click JS Object var img = _this.parent (). Siblings ("IMG"). attr ("src"); var flyer =$ ("

Web Front End utility case-shopping cart parabolic effect