Add items to your shopping cart with jQuery effects

Front Page

<link href="Mycar.css"Rel="stylesheet"/> <script src=".. /jquery.js"></script> <script>$ (function () {$ (". Car"). Click (function () {varPath = $ (". DH"). attr ("src");//get the picture path                varTop = $ (". DH"). offset (). top;//get the original image to the top of offset () offsets                varLeft = $ (". DH"). offset (). left;//distance to left                varim =' "'+ Path +'"style=" top:'+ Top +'px;left:'+ Left +'px "/>';//get a new picture This position is the original seat                if(!$(". Mydh"). is(": Animated")) {//If you do not animate$(". M_img"). Append (im);//add an image to the div for m_img to cover the original$(". Mydh"). Animate ({"Top":"10px"," left":"1000px","Height":"0","width":"0"}, -, function () {$ (". Carnum"). text ("1"); });//The new picture does the animation, the original image does not change                }                           });    }); </script> class="Carnum">0</span></span><span> Customer Service </span><span> complaint advice </span><span> Contact Us </span > class="Main"> class="m_img"> class="DH"Src="img/01.jpg"style="width:200px; height:240px;"/> </div> <divclass="M_addcar"> <p> This is the man to be the king of the Pirates </p> <p> price: ￥<span style="color:red;">8888</span></p> <p> quantity: <spanclass="Mynum">1</span></p> <p><spanclass="Car"> Add to Cart </span><spanclass="GM"> Buy Now </span></p> </div> </div></body>
Style sheet
*{margin:0; Padding:0; }header {text-align:right; Background-color:rgba (174,171,171,0.70);   padding:5px 20px; }header Span{margin-left:10px;}. Carnum {margin:0; Color:red;}. M_img{margin-top:80px; Padding-left:30px;    width:300px;    height:280px; float: left;}. M_addcar {margin-top:80px; Padding-left:30px;    width:500px; height:280px;} . M_addcar P {margin-top:30px; }.    Car,. GM {padding:10px; Background-color:rgba (255,106,0,0.79); Margin-left:10px; Border-radius:10px;/*Rounded Corners*/cursor:pointer; /*change cursor to hand*/}.mydh {width:200px;    height:240px; Opacity:.8; Z-index:999;/*two photos put this on the top floor*/position:absolute; /*give the new picture to an absolute position, so that the animation effect*/}
<link href= "mycar.css" rel= "stylesheet"/>    <script src= ". /jquery.js "></script>    <script>        $ (function () {            $ (". Car "). Click (function () {                var path = $ (". dh "). attr (" src ");//get picture path                 var top = $ (". dh"). offset (). top; Get the original image to the top of the distance    offset ()   offset                 var left = $ (". dh"). o Ffset (). left;  //to left                  var im = '  ';//get new Picture This location is the original seat             &NBSP ;   If (!$ (". mydh"). is (": Animated")) { //if not animated                   &N Bsp $(". M_img "). Append (im);  //add a picture to the div for m_img inside the originalOverwrite                     $ (". mydh"). animate ({"top": "10px", "left": "1000 PX "," Height ":" 0 "," width ":" 0 "},, function () {                  &NBS P     $ (". Carnum "). text (" 1 ");                    });//new Image animation, The original is unchanged   &NBS P            }                     &NB Sp    );       });    </script>    
 Add items to your shopping cart with jQuery effects