jquery制作的移动端购物车效果完整示例

jquery制作的移动端购物车效果完整示例

html部分

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物详情</title> <link href="https://www.jb51.net/index.css" > <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> </head> <body> <header> <h3>全场满100元包邮,还差<span>100</span>元包邮</h3> </header> <div> <ul> <li> <div> <div class= "checks"></div> </div> <div> <div> <div> <img src="https://www.jb51.net/shop/9288714270450521_300.jpg" alt="苹果快速购买"> </div> <div> <div> <p>江南脐橙20个160g以上/个</p> <div></div> </div> <div> 直降</div> <div> <div> <span>¥</span><span>50</span><span>¥75.9</span> </div> <div> <div>-</div> <div>0</div> <div>+</div> </div> </div> </div> </div> <div> <p>满减<span>满一件,即享受16.9元优惠</span></p> </div> </div> </li> <li> <div> <div></div> </div> <div> <div> <div> <img src="https://www.jb51.net/shop/9288714270450521_300.jpg" alt="苹果快速购买"> </div> <div> <div> <p>江南脐橙20个160g以上/个</p> <div></div> </div> <div> 直降</div> <div> <div> <span>¥</span><span>50</span><span>¥75.9</span> </div> <div> <div>-</div> <div>0</div> <div>+</div> </div> </div> </div> </div> <div> <p>满减<span>满一件,即享受16.9元优惠</span></p> </div> </div> </li> <li> <div> <div></div> </div> <div> <div> <div> <img src="https://www.jb51.net/shop/9288714270450521_300.jpg" alt="苹果快速购买"> </div> <div> <div> <p>江南脐橙20个160g以上/个</p> <div></div> </div> <div> 直降</div> <div> <div> <span>¥</span><span>50</span><span>¥75.9</span> </div> <div> <div>-</div> <div>0</div> <div>+</div> </div> </div> </div> </div> <div> <p>满减<span>满一件,即享受16.9元优惠</span></p> </div> </div> </li> <li> <div> <div></div> </div> <div> <div> <div> <img src="https://www.jb51.net/shop/9288714270450521_300.jpg" alt="苹果快速购买"> </div> <div> <div> <p>江南脐橙20个160g以上/个</p> <div></div> </div> <div> 直降</div> <div> <div> <span>¥</span><span>50</span><span>¥75.9</span> </div> <div> <div>-</div> <div>0</div> <div>+</div> </div> </div> </div> </div> <div> <p>满减<span>满一件,即享受16.9元优惠</span></p> </div> </div> </li> <li> <div> <div></div> </div> <div> <div> <div> <img src="https://www.jb51.net/shop/9288714270450521_300.jpg" alt="苹果快速购买"> </div> <div> <div> <p>江南脐橙20个160g以上/个</p> <div></div> </div> <div> 直降</div> <div> <div> <span>¥</span><span>50</span><span>¥75.9</span> </div> <div> <div>-</div> <div>0</div> <div>+</div> </div> </div> </div> </div> <div> <p>满减<span>满一件,即享受16.9元优惠</span></p> </div> </div> </li> </ul> </div> <div> <div> <div index = "0"></div>全选 </div> <div> <div> <p>合计:<span> ¥</span><span>0.00</span></p> <p>已经惠<span>¥0.00</span></p> </div> <div> 去结算(<span>0</span>) </div> </div> </div> <footer> <ul> <li> <img src="https://www.jb51.net/shop/shouye.jpg" alt=""> <p>首页</p> </li><li> <img src="https://www.jb51.net/shop/fenlei.jpg" alt=""> <p>分类</p> </li><li> <img src="https://www.jb51.net/shop/shouye.jpg" alt=""> <p>吃饭吧</p> </li><li> <img src="https://www.jb51.net/shop/car.jpg" alt=""> <p>购物车</p> </li><li> <img src="https://www.jb51.net/shop/shouye.jpg" alt=""> <p>我的</p> </li> </ul> </footer> </body> </html> <script src="https://www.jb51.net/jquery.js"></script> <script src="https://www.jb51.net/index.js"></script>

js

<script src="https://www.jb51.net/jquery.js"></script>  文件自行下载 版本11

index.js:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/382e3eb41d0cbb5676b944a883c08dc3.html