Fly to basket 点击添加到右侧购物车,动画效果

Fly to basket 点击添加到右侧购物车,动画效果

 本例用的价格等是固定的数据，并非用的数据库读取，仅仅演示购物车

演示

 

 

XML/HTML Code

1. <div id="mainContainer">  
2.   
3.     <div id="leftColumn">  
4.           
5.         <div id="products">  
6.             <!-- DIV FOR A PRODUCT -->  
7.             <div class="product_container">  
8.                 <div id="slidingProduct1" class="sliding_product">  
9.                     <img src="images/product.gif">  
10.                     Calendar<br>  
11.                     50.00  
12.                 </div>  
13.                 <a href="#" onclick="addToBasket(1);return false;"><img src="images/basket.gif"></a>  
14.                 <div class="clear"></div>  
15.             </div>  
16.             <!-- END DIV FOR A PRODUCT -->  
17.             <!-- DIV FOR A PRODUCT -->  
18.             <div class="product_container">  
19.                 <div id="slidingProduct2" class="sliding_product">  
20.                     <img src="images/product.gif">  
21.                     Shopping module<br>  
22.                     250.00  
23.                 </div>  
24.                 <a href="#" onclick="addToBasket(2);return false"><img src="images/basket.gif"></a>  
25.                 <div class="clear"></div>  
26.             </div>  
27.             <!-- END DIV FOR A PRODUCT -->  
28.             <!-- DIV FOR A PRODUCT -->  
29.             <div class="product_container">  
30.                 <div id="slidingProduct3" class="sliding_product">  
31.                     <img src="images/product.gif">  
32.                     Menu package<br>  
33.                     35.00  
34.                 </div>  
35.                 <a href="#" onclick="addToBasket(3);return false"><img src="images/basket.gif"></a>  
36.                 <div class="clear"></div>  
37.             </div>  
38.             <!-- END DIV FOR A PRODUCT -->  
39.             <!-- DIV FOR A PRODUCT -->  
40.             <div class="product_container">  
41.                 <div id="slidingProduct4" class="sliding_product">  
42.                     <img src="images/product.gif">  
43.                     Ajax component<br>  
44.                     50.00  
45.                 </div>  
46.                 <a href="#" onclick="addToBasket(4);return false"><img src="images/basket.gif"></a>  
47.                 <div class="clear"></div>  
48.             </div>  
49.             <!-- END DIV FOR A PRODUCT -->  
50.               
51.             <!-- DIV FOR A PRODUCT -->  
52.             <div class="product_container">  
53.                 <div id="slidingProduct5" class="sliding_product">  
54.                     <img src="images/product.gif">  
55.                     Week planner<br>  
56.                     60.00  
57.                 </div>  
58.                 <a href="#" onclick="addToBasket(5);return false"><img src="images/basket.gif"></a>  
59.                 <div class="clear"></div>  
60.             </div>  
61.             <!-- END DIV FOR A PRODUCT -->  
62.               
63.             <!-- DIV FOR A PRODUCT -->  
64.             <div class="product_container">  
65.                 <div id="slidingProduct6" class="sliding_product">  
66.                     <img src="images/product.gif">  
67.                     Forum package<br>  
68.                     150.00  
69.                 </div>  
70.                 <a href="#" onclick="addToBasket(6);return false"><img src="images/basket.gif"></a>  
71.                 <div class="clear"></div>  
72.             </div>  
73.             <!-- END DIV FOR A PRODUCT -->  
74.               
75.             <!-- DIV FOR A PRODUCT -->  
76.             <div class="product_container">  
77.                 <div id="slidingProduct7" class="sliding_product">  
78.                     <img src="images/product.gif">  
79.                     HTML editor<br>  
80.                     150.00  
81.                 </div>  
82.                 <a href="#" onclick="addToBasket(7);return false"><img src="images/basket.gif"></a>  
83.                 <div class="clear"></div>  
84.             </div>  
85.             <!-- END DIV FOR A PRODUCT -->  
86.               
87.             <!-- DIV FOR A PRODUCT -->  
88.             <div class="product_container">  
89.                 <div id="slidingProduct8" class="sliding_product">  
90.                     <img src="images/product.gif">  
91.                     CSS creator<br><br>  
92.                     125.00  
93.                       
94.                 </div>  
95.                 <a href="#" onclick="addToBasket(8);return false"><img src="images/basket.gif"></a>  
96.                 <div class="clear"></div>  
97.             </div>  
98.             <!-- END DIV FOR A PRODUCT -->            
99.         </div>    
100.         <div class="clear"></div>  
101.         <p style="padding:5px"><b>Click on the "Add to basket" links to see how this script works. DHTML is used for the flying effect. Ajax(Asyncron Ajax and XML) is used  
102.         to update the basket on the server.</b></p>  
103.     </div>  
104.     <div id="rightColumn">  
105.         <!-- Shopping cart It's important that the id of this div is "shopping_cart" -->  
106.         <div id="shopping_cart">  
107.             <strong>Shopping cart</strong>    
108.             <table id="shopping_cart_items">  
109.                 <tr>  
110.                     <th>Items</th>  
111.                     <th>Description</th>  
112.                     <th>Price</th>  
113.                     <th></th>  
114.                 </tr>  
115.                 <!-- Here, you can output existing basket items from your database   
116.                 One row for each item. The id of the TR tag should be shopping_cart_items_product + productId,  
117.                 example: shopping_cart_items_product1 for the id 1 -->  
118.                   
119.                   
120.             </table>  
121.               
122.             <div id="shopping_cart_totalprice"></div>  
123.         </div>  
124.     </div>  
125.       
126.     <div class="clear"></div>  
127.       
128. </div>  

 addProduct.php

PHP Code

1. <?  
2.   
3. if(!isset($_POST['productId']))exit;    /* No product id sent as input to this file */  
4.   
5. switch($_POST['productId']){  
6.       
7.     case "1";  
8.         echo "1|||Calendar|||50";  
9.         break;  
10.     case "2";  
11.         echo "2|||Shopping module|||250";  
12.         break;  
13.     case "3";  
14.         echo "3|||Menu package|||35";  
15.         break;    
16.     case "4";  
17.         echo "4|||Ajax component|||50";  
18.         break;  
19.     case "5";  
20.         echo "5|||Week planner|||60";  
21.         break;  
22.     case "6";  
23.         echo "6|||Forum package|||150";  
24.         break;  
25.     case "7";  
26.         echo "7|||HTML editor|||150";  
27.         break;  
28.     case "8";  
29.         echo "8|||CSS creator|||125";  
30.         break;  
31.       
32.       
33.       
34. }  
35.   
36.   
37. ?>  

removeProduct.php

 

PHP Code

1. <?  
2.   
3. if(!isset($_POST['productIdToRemove']))die("Not OK");   /* No product id sent as input to this file */  
4.   
5. // Add your db queries here  
6.   
7. echo "OK";  
8.   
9.   
10. ?>