jquery实现手机端移动端购物车效果代码-html代码-BFW代码库

代码语言：html
所属分类：电商
代码描述：jquery实现手机端移动端购物车效果代码，支持数量增减及单选全选功能
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--清理缓存-->
    <meta http-equiv="Cache-Control" content="no-cache,no-store,must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">

    <style>
        /*底部*/
        * {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-tap-highlight-color: transparent;
        }
        .qwFooter {
            width: 100%;
            position: fixed;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid rgba(238,238,238,1);
            background: #fff;
        }
        .qwFooter div {
            width: 25%;
            text-align: center;
            padding: .15rem 0;
        }
        .qwFooter div img {
            /*width: .36rem;*/
            height: .44rem;
        }
        .qwFooter div p {
            font-size: .14rem;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: rgba(68,68,68,1);
            margin: 0 !important;
            padding-top: .1rem;
        }
        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
            font-size: .26rem;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: rgba(170,170,170,1);
        }

        input:-moz-placeholder, textarea:-moz-placeholder {
            font-size: .26rem;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: rgba(170,170,170,1);
        }

        input::-moz-placeholder, textarea::-moz-placeholder {
            font-size: .26rem;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: rgba(170,170,170,1);
        }

        input:-ms-input-placeholder, textarea:-ms-input-placeholder {
            font-size: .26rem;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: rgba(170,170,170,1);
            font-weight: normal;
        }

        .layui-layer-loading {
            display: flex;
            justify-content: center;
        }
        html {
            background: #F2F2F2;
        }
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            width: 100%;
            height: 100%;
        }
        .container {
            padding: 0;
            background: #fff;
        }

        .container .searchNav {
            position: fixed;
            background: #fff;
            width: 100%;
        }

        .container .searchWra {
            position: relative;
            padding: .2rem 4%;
            background: #fff;
        }

        .container .searchWra input {
            width: 100%;
            height: .6rem;
            background: rgba(247, 247, 247, 1);
            border-radius: .27rem;
            font-size: .24rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(34, 34, 34, 1);
            border: 0;
            outline: none;
            padding: 0 .3rem 0 .6rem;
        }

        .container .searchWra img {
            width: .26rem;
            height: .26rem;
            position: absolute;
            top: .37rem;
            left: .5rem;
        }

        .container .typeScroll {
            padding: .1rem 0 .3rem .2rem;
            background: #fff;
            overflow-x: scroll;
            white-space: nowrap;
            border-bottom: 1px solid #EEEEEE;
        }

        .container .typeScroll div {
            padding: .1rem .25rem;
            background: rgba(247, 248, 249, 1);
            border-radius: .19rem;
            font-size: .24rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(136, 136, 136, 1);
            margin-right: .2rem;
            display: inline-block;
        }

        .container .typeScroll .activeColor {
            background: rgba(255, 240, 230, 1);
            font-size: .24rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(254, 135, 90, 1);
        }

        .container .contentInfo {
            padding: 2rem 0 1.5rem 0;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .container .contentInfo .infoLine {
            width: 100%;
            background: #fff;
            display: flex;
            justify-content: space-between;
            padding: .2rem 3%;
        }
        .container .contentInfo .infoLine .infoLeft {
            width: 40%;
        }
        .container .contentInfo .infoLine .infoLeft img {
            width: 2.56rem;
            height: 2.56rem;
        }
        .container .contentInfo .infoLine .infoRight {
            width: 60%;
            font-size: .26rem;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: rgba(34,34,34,1);
            border-bottom: 1px solid #eee;
        }
        .container .contentInfo .infoLine .infoRight p {
            margin: 0;
            padding: 0;
        }
        .container .contentInfo .infoLine .infoRight p:nth-child(1) {
            padding-bottom: .2rem;
        }
        .container .contentInfo .infoLine .infoRight p:nth-child(2) {
            font-size: .22rem;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: rgba(136,136,136,1);
            padding-bottom: .15rem;
        }
        .container .contentInfo .infoLine .infoRight .tag {}
        .container .contentInfo .infoLine .infoRight .tag span {
            display: inline-block;
            padding: .06rem .15rem;
            font-size: .2rem;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: rgba(254,135,90,1);
            background: rgba(255,240,230,1);
            border-radius: .19rem;
            margin-right: .2rem;
        }
        .container .contentInfo .infoLine .infoRight .addCart {
            display: flex;
            justify-content: space-between;
            padding: .5rem 0 .1rem 0;
        }
        .container .contentInfo .infoLine .infoRight .addCart span {
            display: inline-block;
            font-size: .22rem;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: rgba(136,136,136,1);
        }
        .container .contentInfo .infoLine .infoRight .addCart span i {
            display: inline-block;
            font-size: .3rem;
            font-family: PingFangSC-Semibold,PingFang SC;
            font-weight: 600;
            color: rgba(243,93,69,1);
            font-style: normal;
            margin-right: .1rem;
        }
        .container .contentInfo .infoLine .infoRight .addCart img {
            width: .48rem;
            height: .48rem;
        }


        .modal-dialog {
            position: fixed;
            bottom: 0;
            background: #fff;
            width: 100%;
            padding: 0;
            margin: 0;
            background: none;
        }

        .modal-dialog .modal-content {
            box-shadow: 0;
            border-radius: 0;
            border: 0;
            border-top-left-radius: .2rem;
            border-top-right-radius: .2rem;
            background: #fff;
            padding: 0 .2rem;
        }

        .modal-dialog .modal-content .close {
            color: #333;
            font-size: .4rem;
            padding: .1rem 0;
            text-align: right;
            width: 100%;
            opacity: 1;
            font-weight: normal;
        }
        .modal-dialog .modal-content .close span {
            display: inline-block;
            width: .6rem;
        }

        .modal-dialog .modal-content .cartInfo {
            display: flex;
            justify-content: flex-start;
            padding: 0 0 .3rem 0;
            width: 100%;
            border-bottom: 1px solid #EEEEEE;
        }

        .modal-dialog .modal-content .cartInfo .in.........完整代码请登录后点击上方下载按钮下载查看