经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
jquery仿淘宝购物车页面商品结算（附源码）
来源：cnblogs　　作者：佩奇er　　时间：2019/6/29 14:27:59　　对本文有异议

1、效果图如下：

 

2、源码如下：

html部分：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>购物车</title>
  9.     <link rel="stylesheet" href="./css/reset.css">
  10.     <link rel="stylesheet" href="./css/carts.css">
  11. </head>
  12. <body>
  13.     <section class="cartMain">
  14.         <div class="cartMain_hd">
  15.             <ul class="order_lists cartTop">
  16.                 <li class="list_chk">
  17.                     <!--所有商品全选-->
  18.                     <input type="checkbox" id="all" class="whole_check">
  19.                     <label for="all"></label>
  20.                     全选
  21.                 </li>
  22.                 <li class="list_con">商品信息</li>
  23.                 <li class="list_info">商品参数</li>
  24.                 <li class="list_price">单价</li>
  25.                 <li class="list_amount">数量</li>
  26.                 <li class="list_sum">金额</li>
  27.                 <li class="list_op">操作</li>
  28.             </ul>
  29.         </div>
  30.  
  31.         <div class="cartBox">
  32.             <div class="shop_info">
  33.                 <div class="all_check">
  34.                     <!--店铺全选-->
  35.                     <input type="checkbox" id="shop_a" class="shopChoice">
  36.                     <label for="shop_a" class="shop"></label>
  37.                 </div>
  38.                 <div class="shop_name">
  39.                     店铺：<a href="javascript:;">搜猎人艺术生活</a>
  40.                 </div>
  41.             </div>
  42.             <div class="order_content">
  43.                 <ul class="order_lists">
  44.                     <li class="list_chk">
  45.                         <input type="checkbox" id="checkbox_2" class="son_check">
  46.                         <label for="checkbox_2"></label>
  47.                     </li>
  48.                     <li class="list_con">
  49.                         <div class="list_img"><a href="javascript:;"><img src="./images/1.png" alt=""></a></div>
  50.                         <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div>
  51.                     </li>
  52.                     <li class="list_info">
  53.                         <p>规格：默认</p>
  54.                         <p>尺寸：16*16*3(cm)</p>
  55.                     </li>
  56.                     <li class="list_price">
  57.                         <p class="price">￥980</p>
  58.                     </li>
  59.                     <li class="list_amount">
  60.                         <div class="amount_box">
  61.                             <a href="javascript:;" class="reduce reSty">-</a>
  62.                             <input type="text" value="1" class="sum">
  63.                             <a href="javascript:;" class="plus">+</a>
  64.                         </div>
  65.                     </li>
  66.                     <li class="list_sum">
  67.                         <p class="sum_price">￥980</p>
  68.                     </li>
  69.                     <li class="list_op">
  70.                         <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
  71.                     </li>
  72.                 </ul>
  73.                 <ul class="order_lists">
  74.                     <li class="list_chk">
  75.                         <input type="checkbox" id="checkbox_3" class="son_check">
  76.                         <label for="checkbox_3"></label>
  77.                     </li>
  78.                     <li class="list_con">
  79.                         <div class="list_img"><a href="javascript:;"><img src="./images/2.png" alt=""></a></div>
  80.                         <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div>
  81.                     </li>
  82.                     <li class="list_info">
  83.                         <p>规格：默认</p>
  84.                         <p>尺寸：16*16*3(cm)</p>
  85.                     </li>
  86.                     <li class="list_price">
  87.                         <p class="price">￥780</p>
  88.                     </li>
  89.                     <li class="list_amount">
  90.                         <div class="amount_box">
  91.                             <a href="javascript:;" class="reduce reSty">-</a>
  92.                             <input type="text" value="1" class="sum">
  93.                             <a href="javascript:;" class="plus">+</a>
  94.                         </div>
  95.                     </li>
  96.                     <li class="list_sum">
  97.                         <p class="sum_price">￥780</p>
  98.                     </li>
  99.                     <li class="list_op">
  100.                         <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
  101.                     </li>
  102.                 </ul>
  103.                 <ul class="order_lists">
  104.                     <li class="list_chk">
  105.                         <input type="checkbox" id="checkbox_6" class="son_check">
  106.                         <label for="checkbox_6"></label>
  107.                     </li>
  108.                     <li class="list_con">
  109.                         <div class="list_img"><a href="javascript:;"><img src="./images/3.png" alt=""></a></div>
  110.                         <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div>
  111.                     </li>
  112.                     <li class="list_info">
  113.                         <p>规格：默认</p>
  114.                         <p>尺寸：16*16*3(cm)</p>
  115.                     </li>
  116.                     <li class="list_price">
  117.                         <p class="price">￥180</p>
  118.                     </li>
  119.                     <li class="list_amount">
  120.                         <div class="amount_box">
  121.                             <a href="javascript:;" class="reduce reSty">-</a>
  122.                             <input type="text" value="1" class="sum">
  123.                             <a href="javascript:;" class="plus">+</a>
  124.                         </div>
  125.                     </li>
  126.                     <li class="list_sum">
  127.                         <p class="sum_price">￥180</p>
  128.                     </li>
  129.                     <li class="list_op">
  130.                         <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
  131.                     </li>
  132.                 </ul>
  133.             </div>
  134.         </div>
  135.  
  136.         <div class="cartBox">
  137.             <div class="shop_info">
  138.                 <div class="all_check">
  139.                     <!--店铺全选-->
  140.                     <input type="checkbox" id="shop_b" class="shopChoice">
  141.                     <label for="shop_b" class="shop"></label>
  142.                 </div>
  143.                 <div class="shop_name">
  144.                     店铺：<a href="javascript:;">卷卷旗舰店</a>
  145.                 </div>
  146.             </div>
  147.             <div class="order_content">
  148.                 <ul class="order_lists">
  149.                     <li class="list_chk">
  150.                         <input type="checkbox" id="checkbox_4" class="son_check">
  151.                         <label for="checkbox_4"></label>
  152.                     </li>
  153.                     <li class="list_con">
  154.                         <div class="list_img"><a href="javascript:;"><img src="./images/4.png" alt=""></a></div>
  155.                         <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div>
  156.                     </li>
  157.                     <li class="list_info">
  158.                         <p>规格：默认</p>
  159.                         <p>尺寸：16*16*3(cm)</p>
  160.                     </li>
  161.                     <li class="list_price">
  162.                         <p class="price">￥1980</p>
  163.                     </li>
  164.                     <li class="list_amount">
  165.                         <div class="amount_box">
  166.                             <a href="javascript:;" class="reduce reSty">-</a>
  167.                             <input type="text" value="1" class="sum">
  168.                             <a href="javascript:;" class="plus">+</a>
  169.                         </div>
  170.                     </li>
  171.                     <li class="list_sum">
  172.                         <p class="sum_price">￥1980</p>
  173.                     </li>
  174.                     <li class="list_op">
  175.                         <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
  176.                     </li>
  177.                 </ul>
  178.                 <ul class="order_lists">
  179.                     <li class="list_chk">
  180.                         <input type="checkbox" id="checkbox_5" class="son_check">
  181.                         <label for="checkbox_5"></label>
  182.                     </li>
  183.                     <li class="list_con">
  184.                         <div class="list_img"><a href="javascript:;"><img src="./images/5.png" alt=""></a></div>
  185.                         <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div>
  186.                     </li>
  187.                     <li class="list_info">
  188.                         <p>规格：默认</p>
  189.                         <p>尺寸：16*16*3(cm)</p>
  190.                     </li>
  191.                     <li class="list_price">
  192.                         <p class="price">￥480</p>
  193.                     </li>
  194.                     <li class="list_amount">
  195.                         <div class="amount_box">
  196.                             <a href="javascript:;" class="reduce reSty">-</a>
  197.                             <input type="text" value="1" class="sum">
  198.                             <a href="javascript:;" class="plus">+</a>
  199.                         </div>
  200.                     </li>
  201.                     <li class="list_sum">
  202.                         <p class="sum_price">￥480</p>
  203.                     </li>
  204.                     <li class="list_op">
  205.                         <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
  206.                     </li>
  207.                 </ul>
  208.             </div>
  209.         </div>
  210.  
  211.         <div class="cartBox">
  212.             <div class="shop_info">
  213.                 <div class="all_check">
  214.                     <!--店铺全选-->
  215.                     <input type="checkbox" id="shop_c" class="shopChoice">
  216.                     <label for="shop_c" class="shop"></label>
  217.                 </div>
  218.                 <div class="shop_name">
  219.                     店铺：<a href="javascript:;">卷卷旗舰店</a>
  220.                 </div>
  221.             </div>
  222.             <div class="order_content">
  223.                 <ul class="order_lists">
  224.                     <li class="list_chk">
  225.                         <input type="checkbox" id="checkbox_8" class="son_check">
  226.                         <label for="checkbox_8"></label>
  227.                     </li>
  228.                     <li class="list_con">
  229.                         <div class="list_img"><a href="javascript:;"><img src="./images/1.png" alt=""></a></div>
  230.                         <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div>
  231.                     </li>
  232.                     <li class="list_info">
  233.                         <p>规格：默认</p>
  234.                         <p>尺寸：16*16*3(cm)</p>
  235.                     </li>
  236.                     <li class="list_price">
  237.                         <p class="price">￥1980</p>
  238.                     </li>
  239.                     <li class="list_amount">
  240.                         <div class="amount_box">
  241.                             <a href="javascript:;" class="reduce reSty">-</a>
  242.                             <input type="text" value="1" class="sum">
  243.                             <a href="javascript:;" class="plus">+</a>
  244.                         </div>
  245.                     </li>
  246.                     <li class="list_sum">
  247.                         <p class="sum_price">￥1980</p>
  248.                     </li>
  249.                     <li class="list_op">
  250.                         <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
  251.                     </li>
  252.                 </ul>
  253.                 <ul class="order_lists">
  254.                     <li class="list_chk">
  255.                         <input type="checkbox" id="checkbox_9" class="son_check">
  256.                         <label for="checkbox_9"></label>
  257.                     </li>
  258.                     <li class="list_con">
  259.                         <div class="list_img"><a href="javascript:;"><img src="./images/1.png" alt=""></a></div>
  260.                         <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div>
  261.                     </li>
  262.                     <li class="list_info">
  263.                         <p>规格：默认</p>
  264.                         <p>尺寸：16*16*3(cm)</p>
  265.                     </li>
  266.                     <li class="list_price">
  267.                         <p class="price">￥480</p>
  268.                     </li>
  269.                     <li class="list_amount">
  270.                         <div class="amount_box">
  271.                             <a href="javascript:;" class="reduce reSty">-</a>
  272.                             <input type="text" value="1" class="sum">
  273.                             <a href="javascript:;" class="plus">+</a>
  274.                         </div>
  275.                     </li>
  276.                     <li class="list_sum">
  277.                         <p class="sum_price">￥480</p>
  278.                     </li>
  279.                     <li class="list_op">
  280.                         <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
  281.                     </li>
  282.                 </ul>
  283.             </div>
  284.         </div>
  285.         <!--底部-->
  286.         <div class="bar-wrapper">
  287.             <div class="bar-right">
  288.                 <div class="piece">已选商品<strong class="piece_num">0</strong>件</div>
  289.                 <div class="totalMoney">共计: <strong class="total_text">0.00</strong></div>
  290.                 <div class="calBtn"><a href="javascript:;">结算</a></div>
  291.             </div>
  292.         </div>
  293.     </section>
  294.     <section class="model_bg"></section>
  295.     <section class="my_model">
  296.         <p class="title">删除宝贝<span class="closeModel">X</span></p>
  297.         <p>您确认要删除该宝贝吗？</p>
  298.         <div class="opBtn"><a href="javascript:;" class="dialog-sure">确定</a><a href="javascript:;" class="dialog-close">关闭</a></div>
  299.     </section>
  300.     <script src="./js/jquery-1.11.0.min.js"></script>
  301.     <script src="./js/carts.js"></script>
  302. </body>
  303. </html>

 

 

js部分：

  1. /**
  2.  * Created by Administrator on 2019/5/24.
  3.  */
  5. $(function () {
  7.     //全局的checkbox选中和未选中的样式
  8.     var $allCheckbox = $('input[type="checkbox"]'),     //全局的全部checkbox
  9.         $wholeChexbox = $('.whole_check'),
  10.         $cartBox = $('.cartBox'),                       //每个商铺盒子
  11.         $shopCheckbox = $('.shopChoice'),               //每个商铺的checkbox
  12.         $sonCheckBox = $('.son_check');                 //每个商铺下的商品的checkbox
  13.     $allCheckbox.click(function () {
  14.         if ($(this).is(':checked')) {
  15.             $(this).next('label').addClass('mark');
  16.         } else {
  17.             $(this).next('label').removeClass('mark')
  18.         }
  19.     });
  21.     //===============================================全局全选与单个商品的关系================================
  22.     $wholeChexbox.click(function () {
  23.         var $checkboxs = $cartBox.find('input[type="checkbox"]');
  24.         if ($(this).is(':checked')) {
  25.             $checkboxs.prop("checked", true);
  26.             $checkboxs.next('label').addClass('mark');
  27.         } else {
  28.             $checkboxs.prop("checked", false);
  29.             $checkboxs.next('label').removeClass('mark');
  30.         }
  31.         totalMoney();
  32.     });
  35.     $sonCheckBox.each(function () {
  36.         $(this).click(function () {
  37.             if ($(this).is(':checked')) {
  38.                 //判断：所有单个商品是否勾选
  39.                 var len = $sonCheckBox.length;
  40.                 var num = 0;
  41.                 $sonCheckBox.each(function () {
  42.                     if ($(this).is(':checked')) {
  43.                         num++;
  44.                     }
  45.                 });
  46.                 if (num == len) {
  47.                     $wholeChexbox.prop("checked", true);
  48.                     $wholeChexbox.next('label').addClass('mark');
  49.                 }
  50.             } else {
  51.                 //单个商品取消勾选，全局全选取消勾选
  52.                 $wholeChexbox.prop("checked", false);
  53.                 $wholeChexbox.next('label').removeClass('mark');
  54.             }
  55.         })
  56.     })
  58.     //=======================================每个店铺checkbox与全选checkbox的关系/每个店铺与其下商品样式的变化===================================================
  59.  
  60.     //店铺有一个未选中，全局全选按钮取消对勾，若店铺全选中，则全局全选按钮打对勾。
  61.     $shopCheckbox.each(function () {
  62.         $(this).click(function () {
  63.             if ($(this).is(':checked')) {
  64.                 //判断：店铺全选中，则全局全选按钮打对勾。
  65.                 var len = $shopCheckbox.length;
  66.                 var num = 0;
  67.                 $shopCheckbox.each(function () {
  68.                     if ($(this).is(':checked')) {
  69.                         num++;
  70.                     }
  71.                 });
  72.                 if (num == len) {
  73.                     $wholeChexbox.prop("checked", true);
  74.                     $wholeChexbox.next('label').addClass('mark');
  75.                 }
  77.                 //店铺下的checkbox选中状态
  78.                 $(this).parents('.cartBox').find('.son_check').prop("checked", true);
  79.                 $(this).parents('.cartBox').find('.son_check').next('label').addClass('mark');
  80.             } else {
  81.                 //否则，全局全选按钮取消对勾
  82.                 $wholeChexbox.prop("checked", false);
  83.                 $wholeChexbox.next('label').removeClass('mark');
  85.                 //店铺下的checkbox选中状态
  86.                 $(this).parents('.cartBox').find('.son_check').prop("checked", false);
  87.                 $(this).parents('.cartBox').find('.son_check').next('label').removeClass('mark');
  88.             }
  89.             totalMoney();
  90.         });
  91.     });
  94.     //========================================每个店铺checkbox与其下商品的checkbox的关系======================================================
  95.  
  96.     //店铺$sonChecks有一个未选中，店铺全选按钮取消选中，若全都选中，则全选打对勾
  97.     $cartBox.each(function () {
  98.         var $this = $(this);
  99.         var $sonChecks = $this.find('.son_check');
  100.         $sonChecks.each(function () {
  101.             $(this).click(function () {
  102.                 if ($(this).is(':checked')) {
  103.                     //判断：如果所有的$sonChecks都选中则店铺全选打对勾！
  104.                     var len = $sonChecks.length;
  105.                     var num = 0;
  106.                     $sonChecks.each(function () {
  107.                         if ($(this).is(':checked')) {
  108.                             num++;
  109.                         }
  110.                     });
  111.                     if (num == len) {
  112.                         $(this).parents('.cartBox').find('.shopChoice').prop("checked", true);
  113.                         $(this).parents('.cartBox').find('.shopChoice').next('label').addClass('mark');
  114.                     }
  116.                 } else {
  117.                     //否则，店铺全选取消
  118.                     $(this).parents('.cartBox').find('.shopChoice').prop("checked", false);
  119.                     $(this).parents('.cartBox').find('.shopChoice').next('label').removeClass('mark');
  120.                 }
  121.                 totalMoney();
  122.             });
  123.         });
  124.     });
  127.     //=================================================商品数量==============================================
  128.     var $plus = $('.plus'),
  129.         $reduce = $('.reduce'),
  130.         $all_sum = $('.sum');
  131.     $plus.click(function () {
  132.         var $inputVal = $(this).prev('input'),
  133.             $count = parseInt($inputVal.val())+1,
  134.             $obj = $(this).parents('.amount_box').find('.reduce'),
  135.             $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
  136.             $price = $(this).parents('.order_lists').find('.price').html(),  //单价
  137.             $priceTotal = $count*parseInt($price.substring(1));
  138.         $inputVal.val($count);
  139.         $priceTotalObj.html('￥'+$priceTotal);
  140.         if($inputVal.val()>1 && $obj.hasClass('reSty')){
  141.             $obj.removeClass('reSty');
  142.         }
  143.         totalMoney();
  144.     });
  146.     $reduce.click(function () {
  147.         var $inputVal = $(this).next('input'),
  148.             $count = parseInt($inputVal.val())-1,
  149.             $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
  150.             $price = $(this).parents('.order_lists').find('.price').html(),  //单价
  151.             $priceTotal = $count*parseInt($price.substring(1));
  152.         if($inputVal.val()>1){
  153.             $inputVal.val($count);
  154.             $priceTotalObj.html('￥'+$priceTotal);
  155.         }
  156.         if($inputVal.val()==1 && !$(this).hasClass('reSty')){
  157.             $(this).addClass('reSty');
  158.         }
  159.         totalMoney();
  160.     });
  162.     $all_sum.keyup(function () {
  163.         var $count = 0,
  164.             $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
  165.             $price = $(this).parents('.order_lists').find('.price').html(),  //单价
  166.             $priceTotal = 0;
  167.         if($(this).val()==''){
  168.             $(this).val('1');
  169.         }
  170.         $(this).val($(this).val().replace(/\D|^0/g,''));
  171.         $count = $(this).val();
  172.         $priceTotal = $count*parseInt($price.substring(1));
  173.         $(this).attr('value',$count);
  174.         $priceTotalObj.html('￥'+$priceTotal);
  175.         totalMoney();
  176.     })
  178.     //======================================移除商品========================================
  179.  
  180.     var $order_lists = null;
  181.     var $order_content = '';
  182.     $('.delBtn').click(function () {
  183.         $order_lists = $(this).parents('.order_lists');
  184.         $order_content = $order_lists.parents('.order_content');
  185.         $('.model_bg').fadeIn(300);
  186.         $('.my_model').fadeIn(300);
  187.     });
  189.     //关闭模态框
  190.     $('.closeModel').click(function () {
  191.         closeM();
  192.     });
  193.     $('.dialog-close').click(function () {
  194.         closeM();
  195.     });
  196.     function closeM() {
  197.         $('.model_bg').fadeOut(300);
  198.         $('.my_model').fadeOut(300);
  199.     }
  200.     //确定按钮，移除商品
  201.     $('.dialog-sure').click(function () {
  202.         $order_lists.remove();
  203.         if($order_content.html().trim() == null || $order_content.html().trim().length == 0){
  204.             $order_content.parents('.cartBox').remove();
  205.         }
  206.         closeM();
  207.         $sonCheckBox = $('.son_check');
  208.         totalMoney();
  209.     })
  211.     //======================================总计==========================================
  212.  
  213.     function totalMoney() {
  214.         var total_money = 0;
  215.         var total_count = 0;
  216.         var calBtn = $('.calBtn a');
  217.         $sonCheckBox.each(function () {
  218.             if ($(this).is(':checked')) {
  219.                 var goods = parseInt($(this).parents('.order_lists').find('.sum_price').html().substring(1));
  220.                 var num =  parseInt($(this).parents('.order_lists').find('.sum').val());
  221.                 total_money += goods;
  222.                 total_count += num;
  223.             }
  224.         });
  225.         $('.total_text').html('￥'+total_money);
  226.         $('.piece_num').html(total_count);
  227.         $('#order_num').html(total_count);
  229.         // console.log(total_money,total_count);
  230.  
  231.         if(total_money!=0 && total_count!=0){
  232.             if(!calBtn.hasClass('btn_sty')){
  233.                 calBtn.addClass('btn_sty');
  234.             }
  235.         }else{
  236.             if(calBtn.hasClass('btn_sty')){
  237.                 calBtn.removeClass('btn_sty');
  238.             }
  239.         }
  240.     }
  243. });

 

css部分：

两个文件，carts.css 和 reset.css

  1.         /* 清除内外边距 */
  3.     body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
  4.     /* structural elements 结构元素 */
  6.     dl, dt, dd, ul, ol, li,
  7.     /* list elements 列表元素 */
  9.     pre,
  10.     /* text formatting elements 文本格式元素 */
  12.     fieldset, lengend, button, input, textarea,
  13.     /* form elements 表单元素 */
  15.     th, td {
  16.         /* table elements 表格元素 */
  17.         margin: 0;
  18.         padding: 0;
  19.     }
  20.     /* 设置默认字体 */
  22.     body, button, input, select, textarea {
  23.         /* for ie */
  24.         /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
  25.         font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
  26.         /* 用 ascii 字符表示，使得在任何编码下都无问题 */
  27.     }
  29.     h1 {
  30.         font-size: 18px;
  31.         /* 18px / 12px = 1.5 */
  32.     }
  34.     h2 {
  35.         font-size: 16px;
  36.     }
  38.     h3 {
  39.         font-size: 14px;
  40.     }
  42.     h4, h5, h6 {
  43.         font-size: 100%;
  44.     }
  46.     address, cite, dfn, em, var {
  47.         font-style: normal;
  48.     }
  49.     /* 将斜体扶正 */
  51.     code, kbd, pre, samp, tt {
  52.         font-family: "Courier New", Courier, monospace;
  53.     }
  54.     /* 统一等宽字体 */
  56.     small {
  57.         font-size: 12px;
  58.     }
  59.     /* 小于 12px 的中文很难阅读，让 small 正常化 */
  60.     /* 重置列表元素 */
  62.     ul, ol {
  63.         list-style: none;
  64.     }
  65.     /* 重置文本格式元素 */
  67.     a {
  68.         text-decoration: none;
  69.         color: #000;
  70.     }
  71.     /*a:hover { text-decoration: underline; }*/
  73.     abbr[title], acronym[title] {
  74.         /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
  75.         border-bottom: 1px dotted;
  76.         cursor: help;
  77.     }
  79.     q:before, q:after {
  80.         content: '';
  81.     }
  82.     /* 重置表单元素 */
  84.     legend {
  85.         color: #000;
  86.     }
  87.     /* for ie6 */
  89.     fieldset, img {
  90.         border: none;
  91.     }
  92.     /* img 搭车：让链接里的 img 无边框 */
  93.     /* 注：optgroup 无法扶正 */
  95.     button, input, select, textarea {
  96.         font-size: 100%;
  97.         /* 使得表单元素在 ie 下能继承字体大小 */
  98.     }
  99.     /* 重置表格元素 */
  101.     table {
  102.         border-collapse: collapse;
  103.         border-spacing: 0;
  104.     }
  105.     /* 重置 hr */
  107.     hr {
  108.         border: none;
  109.         height: 1px;
  110.     }
  111.     /* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
  113.     html {
  114.         overflow-y: scroll;
  115.     }
  116.     /*  浮动  */
  118.     .fl {
  119.         float: left
  120.     }
  122.     .fr {
  123.         float: right
  124.     }
  125.     /*  清除浮动  */
  127.     .clearfix:after {
  128.         content: " ";
  129.         display: block;
  130.         clear: both;
  131.         visibility: hidden;
  132.     }

 

cart.css部分：

  1. html,body{
  2.     position: relative;
  3.     width: 100%;
  4.     min-height: 950px;
  5. }
  6. input[type="checkbox"]{
  7.     display: none;
  8. }
  9. label{
  10.     position: relative;
  11.     display: inline-block;
  12.     z-index: 1;
  13.     border: 1px solid #b8b8b8;
  14.     margin-left: 10px;
  15.     border-radius: 1px;
  16.     width: 12px;
  17.     height: 12px;
  18.     cursor: pointer;
  19. }
  20. label.mark{
  21.     background: url("../images/mark1.png") no-repeat -1px -1px;
  22. }
  24. a:hover{
  25.     color: #ff873e;
  26.     text-decoration: underline;
  27. }
  31. .cartMain{
  32.     position: relative;
  33.     width: 1200px;
  34.     min-width: 1200px;
  35.     max-width: 1200px;
  36.     margin: 0 auto;
  37.     padding: 0px 0px 100px;
  38.     min-height: 210px;
  39. }
  40. /*购物车头部*/
  41. .cartMain_hd{
  42.     width: 100%;
  43.     height: 50px;
  44.     line-height: 50px;
  45.     color: #3c3c3c;
  46. }
  47. .cartMain_hd .cartTop{
  48.     height: 50px;
  49. }
  50. .cartMain_hd .cartTop .list_chk{
  51.     width: 80px;
  52.     text-indent: 30px;
  53. }
  54. .cartMain_hd .cartTop .list_con{
  55.     width: 312px;
  56. }
  57. .cartMain_hd .cartTop .list_chk label{
  58.     position: absolute;
  59.     left: 10px;
  60.     top:19px;
  61.     margin: 0;
  62. }
  63. .cartMain_hd .cartTop .list_info{
  64.     padding: 0;
  65.     text-indent: 15px;
  66. }
  67. .cartMain_hd .cartTop .list_con{
  68.     text-indent: 140px;
  69. }
  72. .cartBox{
  73.     width: 100%;
  74.     margin-bottom: 15px;
  75. }
  76. .cartBox .shop_info{
  77.     position: relative;
  78.     width: 100%;
  79.     height: 38px;
  80.     background-color: #fff;
  81.     line-height: 38px;
  82.     vertical-align: baseline;
  83. }
  84. .cartBox .shop_info .all_check{
  85.     position: relative;
  86.     float: left;
  87.     width: 30px;
  88.     height: 38px;
  89. }
  91. .cartBox .shop_info .all_check input[type="checkbox"]{
  92.     position: absolute;
  93.     z-index: 0;
  94.     left: -20px;
  95.     top: -20px;
  96. }
  97. .cartBox .shop_info .all_check .shop{
  98.     position: absolute;
  99.     top:13px;
  100. }
  101. .cartBox .shop_info .shop_name{
  102.     float: left;
  103. }
  104.  
  105.  
  106.  
  107. /*商品列表*/
  108. .cartBox .order_content{
  109.     border: 1px solid #ccc;
  110. }
  111. .cartBox .order_content a{
  112.     display: block;
  113. }
  114. .order_lists{
  115.     width: 100%;
  116.     height: 130px;
  117.     border-bottom: 1px solid #e7e7e7;
  118. }
  119. .order_lists:last-child{
  120.     border-bottom: none;
  121. }
  122. .order_lists li{
  123.     float: left;
  124.     height: 100%;
  125. }
  127. .order_lists .list_chk{
  128.     position: relative;
  129.     width: 50px;
  130. }
  131. .order_lists .list_chk input[type="checkbox"]{
  132.     position: absolute;
  133.     z-index: 0;
  134.     left: -20px;
  135.     top: -20px;
  136. }
  137. .order_lists .list_chk label{
  138.     margin: 20px 0 0 24px;
  139. }
  141. .order_lists .list_con{
  142.     width: 342px;
  143. }
  144. .order_lists .list_con .list_img{
  145.     width: 90px;
  146.     height: 90px;
  147.     margin-top: 20px;
  148.     float: left;
  149. }
  150. .order_lists .list_con .list_img img{
  151.     width: 100%;
  152.     vertical-align: top;
  153. }
  154. .order_lists .list_con .list_text{
  155.     margin: 20px 0 0 10px;
  156.     line-height: 18px;
  157.     width: 200px;
  158.     float: left;
  159. }
  160. .order_lists .list_con .list_text a{
  161.     color: #3c3c3c;
  162. }
  163. .order_lists .list_con .list_text a:hover{
  164.     color: #ff873e;
  165.     text-decoration: underline;
  166. }
  168. .order_lists .list_info{
  169.     width: 252px;
  170.     box-sizing: border-box;
  171.     padding: 20px 0;
  172. }
  173. .order_lists .list_info p{
  174.     color: #9c9c9c;
  175.     line-height: 18px;
  176.     margin-left: 15px;
  177. }
  178. .order_lists .list_price{
  179.     width: 130px;
  180. }
  181. .order_lists .list_price .price{
  182.     margin-top: 20px;
  183.     line-height: 18px;
  184.     font-family: Verdana,Tahoma,arial;
  185.     color: #3c3c3c;
  186.     font-weight: bold;
  187. }
  188. .order_lists .list_amount{
  189.     width: 120px;
  190. }
  191. .order_lists .list_amount .amount_box{
  192.     margin-top: 20px;
  193.     width: 77px;
  194.     height: 25px;
  195.     position: relative;
  196. }
  197. .order_lists .list_amount .amount_box input{
  198.     width: 39px;
  199.     height: 15px;
  200.     line-height: 15px;
  201.     border: 1px solid #aaa;
  202.     color: #343434;
  203.     text-align: center;
  204.     padding: 4px 0;
  205.     background-color: #fff;
  206.     z-index: 2;
  207.     position: absolute;
  208.     left: 18px;
  209.     float: left;
  210. }
  211. .order_lists .list_amount .amount_box a{
  212.     float: left;
  213.     height: 23px;
  214.     width: 17px;
  215.     border: 1px solid #e5e5e5;
  216.     background: #f0f0f0;
  217.     text-align: center;
  218.     line-height: 23px;
  219.     color: #444;
  220.     position: absolute;
  221.     top:0;
  222. }
  223. .order_lists .list_amount .amount_box a:hover{
  224.     border-color: #ff873e;
  225.     text-decoration: none;
  226.     color: #ff873e;
  227.     z-index: 3;
  228. }
  230. .order_lists .list_amount .amount_box .reduce{
  231.     left: 0;
  232. }
  234. .order_lists .list_amount .amount_box .reSty{
  235.     color: #cbcbcb;
  236. }
  237. .order_lists .list_amount .amount_box .reSty:hover{
  238.     border-right: none;
  239.     border-color: #e5e5e5;
  240.     text-decoration: none;
  241.     color: #cbcbcb;
  242. }
  244. .order_lists .list_amount .amount_box .plus{
  245.     border-left-color: transparent;
  246.     right: 0;
  247. }
  250. .order_lists .list_sum{
  251.     width: 140px;
  252. }
  253. .order_lists .list_sum .sum_price{
  254.     line-height: 18px;
  255.     margin-top: 20px;
  256.     font-family: Verdana,Tahoma,arial;
  257.     color: #ff0000;
  258.     font-weight: bold;
  259. }
  260. .order_lists .list_op{
  261.     width: 164px;
  262. }
  263. .order_lists .list_op .del{
  264.     margin-top: 20px;
  265.     line-height: 18px;
  266. }
  267.  
  268. /*底部总计算价*/
  269. .bar-wrapper{
  270.     width: 1200px;
  271.     height: 50px;
  272.     position: fixed;
  273.     bottom: -1px;
  274.     z-index: 99;
  275.     background: #e5e5e5;
  276. }
  277. .bar-wrapper .bar-right{
  278.     float: right;
  279.     color: #3c3c3c;
  280. }
  281. .bar-wrapper .bar-right strong{
  282.     color: #f40;
  283. }
  285. .bar-wrapper .bar-right .piece{
  286.     float: left;
  287.     min-width: 110px;
  288.     margin-right: 20px;
  289.     height: 50px;
  290.     line-height: 50px;
  291. }
  292. .bar-wrapper .bar-right .piece .piece_num{
  293.     display: inline-block;
  294.     padding: 0 10px;
  295.     font-weight: 700;
  296.     font-size: 18px;
  297.     font-family: tohoma,arial;
  298. }
  299. .bar-wrapper .bar-right .totalMoney{
  300.     float: left;
  301.     min-width: 100px;
  302.     height: 50px;
  303.     line-height: 50px;
  304. }
  305. .bar-wrapper .bar-right .totalMoney .total_text{
  306.     float: right;
  307.     font-weight: 400;
  308.     font-size: 20px;
  309.     font-family: Arial;
  310.     vertical-align: middle;
  311.     margin-right: 10px;
  312.     margin-left: 15px;
  313. }
  314. .bar-wrapper .bar-right .calBtn{
  315.     float: left;
  316. }
  317. .bar-wrapper .bar-right .calBtn a{
  318.     display: block;
  319.     width: 120px;
  320.     height: 50px;
  321.     color: #fff;
  322.     background: #B0B0B0;
  323.     cursor: not-allowed;
  324.     font-size: 22px;
  325.     letter-spacing: 5px;
  326.     text-decoration: none;
  327.     line-height: 50px;
  328.     text-align: center;
  329.     border-radius: 2px;
  330. }
  331. .bar-wrapper .bar-right .calBtn a.btn_sty{
  332.     background: #f40;
  333.     cursor: pointer;
  334. }
  335.  
  336. /*自己定义的模态框*/
  337. .model_bg{
  338.     position: absolute;
  339.     top:0;
  340.     left: 0;
  341.     bottom: 0;
  342.     right: 0;
  343.     background: rgba(0,0,0,.6);
  344.     z-index: 999;
  345.     display: none;
  346. }
  347. .my_model{
  348.     position: fixed;
  349.     display: none;
  350.     top:50%;
  351.     left: 50%;
  352.     margin-top: -50px;
  353.     margin-left: -200px;
  354.     z-index: 9999;
  355.     width: 360px;
  356.     height: 120px;
  357.     border: 1px solid #aeaeae;
  358.     border-radius: 3px;
  359.     padding: 20px;
  360.     background: #fff;
  361. }
  362. .my_model .title{
  363.     font-size: 14px;
  364.     color: #3c3c3c;
  365.     font-weight: 700;
  366.     margin-bottom: 20px;
  367. }
  368. .my_model .title .closeModel{
  369.     float: right;
  370.     cursor: pointer;
  371. }
  372. .my_model p{
  373.     line-height:16px;
  374. }
  375. .my_model .opBtn{
  376.     margin-top: 20px;
  377. }
  378. .my_model .opBtn a{
  379.     width: 58px;
  380.     height: 28px;
  381.     line-height: 28px;
  382.     text-align: center;
  383.     -webkit-border-radius: 1px;
  384.     -moz-border-radius: 1px;
  385.     -ms-border-radius: 1px;
  386.     border-radius: 1px;
  387.     display: inline-block;
  388.     margin-right: 10px;
  389.     font-weight: 700;
  390. }
  391. .my_model .dialog-sure{
  392.     background: #52a0e5;
  393.     color: #fff;
  394.     border: 1px solid #52a0e5;
  395. }
  397. .my_model .dialog-close{
  398.     background: #fff;
  399.     border: 1px solid #d9d9d9;
  400.     color: #3c3c3c;
  401. }

 

 

源码地址：

链接：https://pan.baidu.com/s/1HV1zk3QsJti8yyJ1gNBWnQ  提取码：skhx 

如链接过期了私信或留言，看到会第一时间回复

干货分享，记得留个赞再走哦~

 

原文链接：http://www.cnblogs.com/hxun/p/11106441.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号