jquery实现手机端移动端购物车效果代码
代码语言：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 .infoLeft {
width: 25%;
}
.modal-dialog .modal-content .cartInfo .infoLeft img {
width: 1.6rem;
height: 1.6rem;
}
.modal-dialog .modal-content .cartInfo .infoRight p:nth-child(1) {
font-size: .26rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(34, 34, 34, 1);
}
.modal-dialog .modal-content .cartInfo .infoRight p:nth-child(2) {
font-size: .22rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(136, 136, 136, 1);
}
.modal-dialog .modal-content .cartInfo .infoRight p span {
font-size: .26rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(243, 93, 69, 1);
}
.modal-dialog .modal-content .countInput {
padding: .2rem 0;
border-bottom: 1px solid #EEEEEE;
}
.modal-dialog .modal-content .countInput span {
display: inline-block;
font-size: .3rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(34, 34, 34, 1);
padding-right: .2rem;
}
input {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
-webkit-appearance: none;
outline: none;
border: none;
}
.modal-dialog .modal-content .countInput input {
padding: .1rem 0;
width: 70%;
border: 0;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
-webkit-appearance: none;
outline: none;
border: none;
}
.modal-dialog .modal-content .upButn {
padding: 1rem .2rem .3rem .2rem;
}
.modal-dialog .modal-content .upButn button {
width: 100%;
height: .78rem;
line-height: .78rem;
background: rgba(191, 17, 17, 1);
border-radius: .39rem;
font-size: .3rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
border: 0;
outline: none;
}
/************** 购物车 ***************/
.cartList {
width: 100%;
}
.cartList .cartCenter {
width: 100%;
border-radius: .1rem;
margin-bottom: 3rem;
}
.cartList .cartCenter .cartItem {
/*margin-top: 20px;
overflow: hidden;
position: relative;
width: 120%;
-webkit-transition: all 0.1s linear;*/
}
.cartList .cartCenter .cartItem .ticket_list {
margin-top: .2rem;
overflow: hidden;
position: relative;
width: 120%;
-webkit-transition: all 0.1s linear;
}
.cartList .cartCenter .cartItem .ticket_list .ticket_box {
padding: .2rem .2rem;
border-radius: .1rem;
margin: 0 15px;
background-color: #FFFFFF;
display: flex;
justify-content: space-between;
}
.cartList .cartCenter .cartItem .itemLeft {
width: 10%;
}
.cartList .cartCenter .cartItem .itemLeft img {
width: .33rem;
height: .33rem;
}
.cartList .cartCenter .cartItem .itemRight {
width: 90%;
display: flex;
justify-content: flex-start;
border-bottom: 1px solid #EEEEEE;
padding: 0 0 .3rem 0;
}
.cartList .cartCenter .cartItem:last-child .itemRight {
border: 0;
}
.cartList .cartCenter .cartItem .itemRight .rightImg {}
.cartList .cartCenter .cartItem .itemRight .rightImg img {
width: 1.3rem;
height: 1.3rem;
}
.cartList .cartCenter .cartItem .itemRight .rightInfo {
padding-left: .2rem;
width: 80%;
}
.cartList .cartCenter .cartItem .itemRight .rightInfo .title {
font-size: .26rem;
font-family: PingFangSC-Regular,PingFang SC;
font-weight: 400;
color: rgba(34,34,34,1);
height: .78rem;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.cartList .cartCenter .cartItem .itemRight .rightInfo .payCount {
font-size: .22rem;
font-family: PingFangSC-Regular,PingFang SC;
font-weight: 400;
color: rgba(136,136,136,1);
}
.cartList .cartCenter .cartItem .itemRight .rightInfo .payCount i {
font-size: .26rem;
font-family: PingFangSC-Semibold,PingFang SC;
font-weight: 600;
color: rgba(243,93,69,1);
font-style: normal;
}
.cartList .cartCenter .cartItem .itemRight .rightInfo .countInp {
display: flex;
justify-content: space-between;
align-items: center;
}
.cartList .cartCenter .cartItem .itemRight .rightInfo .countInp .inpRight {
position: relative;
width: 30%;
}
.cartList .cartCenter .cartItem .itemRight .rightInfo .countInp input {
width: 80%;
border-radius: .04rem;
padding: .06rem .1rem;
border: .01px solid rgba(223,223,225,1);
color: #222222;
}
.cartList .cartCenter .cartItem .itemRight .rightInfo .countInp em {
font-style: normal;
display: inline-block;
width: .5rem;
height: .5rem;
text-align: center;
line-height: .5rem;
background: rgba(247,247,247,1);
border-radius: 0px .04rem .04rem 0px;
border: 1px solid rgba(223,223,225,1);
position: absolute;
top: 0;
right: 0;
}
.allChecked {
width: 100%;
display: flex;
justify-content: space-between;
position: fixed;
bottom: 1.2rem;
background: #fff;
padding: 0 .2rem;
}
.allChecked .checkedLeft {
padding: .2rem .2rem;
}
.allChecked .checkedLeft img {
width: .33rem;
height: .33rem;
}
.allChecked .checkedLeft span {
display: inline-block;
font-size: .26rem;
font-family: PingFangSC-Regular,PingFang SC;
font-weight: 400;
color: rgba(34,34,34,1);
padding: 0 .1rem;
}
.allChecked .checkedLeft p {
margin: 0;
}
.allChecked .checkedLeft p:nth-child(2) {
font-size: .22rem;
font-family: PingFangSC-Regular,PingFang SC;
font-weight: 400;
color: rgba(136,136,136,1);
padding-top: .1rem;
}
.allChecked .checkedRight {
font-size: .24rem;
font-family: PingFangSC-Regular,PingFang SC;
font-weight: 400;
color: rgba(34,34,34,1);
display: flex;
align-items: center;
}
.allChecked .checkedRight span {
display: inline-block;
padding-right: .2rem;
}
.allChecked .checkedRight i {
font-size: .3rem;
font-family: PingFangSC-Semibold,PingFang SC;
font-weight: 600;
color: rgba(250,119,100,1);
font-style: normal;
}
.allChecked .checkedRight button {
width: 1.91rem;
height: .78rem;
background: rgba(191,17,17,1);
border-radius: 39px;
font-size: .3rem;
font-family: PingFangSC-Semibold,PingFang SC;
font-weight: 600;
color: rgba(255,255,255,1);
border: 0;
outline: none;
}
.allChecked .checkedRight em {
font-style: normal;
}
.swipe_rdiv {
z-index: 200;
position: absolute;
right: 12px;
text-align: center;
}
.swipe {
-webkit-transform: translate(-16%,0);
-webkit-transition: all 0.1s linear;
}
.swipe_rdiv {
z-index: 200;
position: absolute;
right: 12px;
text-align: center;
/*width: 18%;*/
height: 2rem;
line-height: 2rem;
background: #FA7764;
font-size: .24rem;
font-family: PingFangSC-Regular,PingFang SC;
font-weight: 400;
color: rgba(255,255,255,1);
}
.swipe_rdiv img {
height: 36px;
}
.swipe_rline {
float: left;
background-color: #3CB3C3;
width: 2px;
margin-top: 3%;
}
.ui-loader-default {
display: none
}
.ui-mobile-viewport {
border: none;
}
.ui-page {
padding: 0;
margin: 0;
outline: 0
}
/*购物车是空的*/
.cartList .cartCenter .cartNull {
text-align: center;
padding-top: 40%;
}
.cartList .cartCenter .cartNull img {
height: 2rem;
}
.cartList .cartCenter .cartNull p {
padding-top: .3rem;
}
/************************* 新加选规格 *************************/
.cartList {
overflow: scroll;
}
.cartList .cartCenter .cartItem .itemRight {
padding: 0;
}
.cartList .cartCenter .cartItem .ticket_list .ticket_box .ticket_bottom {
margin-top: .2rem;
}
.cartList .cartCenter .cartItem .ticket_list .ticket_box {
flex-wrap: wrap;
}
.cartList .cartCenter .cartItem .ticket_list .ticket_box .ticket_top {
width: 100%;
display: flex;
}
.cartList .cartCenter .cartItem .ticket_list .ticket_box .ticket_bottom {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.cartList .cartCenter .cartItem .ticket_list .ticket_box .ticket_bottom .bottom_left {
font-size: .26rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
padding-left: 10%;
}
.cartList .cartCenter .cartItem .ticket_list .ticket_box .ticket_bottom .bottom_left .bottom_input {
font-size: .26rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
}
.cartList .cartCenter .cartItem .ticket_list .ticket_box .ticket_bottom .bottom_right span {
font-size: .26rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #888888;
display: inline-block;
padding-right: .2rem;
}
.cartList .cartCenter .cartItem .ticket_list .ticket_box .ticket_bottom .bottom_right span i {
font-size: .26rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: normal;
color: #F35D45;
font-style: normal;
}
.cartList .cartCenter .cartItem .ticket_list .ticket_box .ticket_bottom .bottom_right,.cartList .cartCenter .cartItem .ticket_list .ticket_box .ticket_bottom .bottom_right .bottom_input {
display: flex;
width: 55%;
justify-content: flex-end;
align-items: center;
}
.cartList .cartCenter .cartItem .ticket_list .ticket_box .ticket_bottom .bottom_right .bottom_input {
border-top: 1px solid #DFDFE1;
border-bottom: 1px solid #DFDFE1;
}
.cartList .cartCenter .cartItem .ticket_list .ticket_box .ticket_bottom .bottom_right .bottom_input span {
font-size: .4rem;
font-weight: normal;
color: #888888;
width: 1.5rem;
text-align: center;
line-height: .5rem;
background: #F7F7F7;
border-radius: 0px .04rem .04rem 0px;
border-left: 1px solid #DFDFE1;
border-right: 1px solid #DFDFE1;
padding: 0;
}
.cartList .cartCenter .cartItem .ticket_list .ticket_box .ticket_bottom .bottom_right .bottom_input input {
text-align: center;
width: 100%;
padding: .06rem 0;
}
em {
font-style: normal;
font-style: normal;
}
</style>
<title>购物车</title>
<style>
/*购物车弹框*/
.modal {
display: flex;
align-items: center;
}
.modal-dialog {
position: relative;
padding: 0 10%;
}
.modal-dialog .modal-content {
padding: 0;
}
.modal-dialog .modal-content {
border-radius: .1rem;
/*padding-bottom: .2rem;*/
}
.modal-dialog .modal-content p {
font-size: .3rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #222222;
margin: 0;
padding: 0;
text-align: center;
padding: .2rem 0 .5rem 0;
}
.modal-dialog .modal-content .pay_type {
padding: 0 5%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: .3rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
}
.modal-dialog .modal-content .pay_type {
padding-bottom: .4rem;
}
.modal-dialog .modal-content .pay_type:nth-child(3) {
border-bottom: 1px solid #DDDDDD;
}
.modal-dialog .modal-content .pay_type .pay_left img {
height: .4rem;
vertical-align: middle;
}
.modal-dialog .modal-content .pay_type .pay_right img {
height: .35rem;
}
.modal-dialog .modal-content .pay_type .pay_left span {
display: inline-block;
vertical-align: middle;
padding-left: .1rem;
}
.modal-dialog .modal-content .pay_butn {
display: flex;
justify-content: space-between;
}
.modal-dialog .modal-content .pay_butn button {
width: 49%;
outline: none;
border: 0;
padding: .3rem 0;
text-align: center;
background: none;
font-size: .3rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
}
.modal-dialog .modal-content .pay_butn button:nth-child(1) {
color: #888888;
}
.modal-dialog .modal-content .pay_butn span {
display: inline-block;
width: 1px;
height: .4rem;
background: #ddd;
margin-top: .3rem;
}
</style>
</head>
<body style="background: none;">
<div class="cartList">
<div class="cartCenter">
<div class="cartItem" style="overflow: hidden;">
<div class="ticket_list ">
<div style="width: 82.8%;float: left; position: relative;">
<div class="ticket_box">
<div class="ticket_top">
<div class="itemLeft">
<img src="//repo.bfw.wiki/bfwrepo/image/60cd5efd01988.png" alt="" />
</div>
<div class="itemRight">
<div class="rightImg">
<img src="//repo.bfw.wiki/bfwrepo/image/5ff8f9e5b4e43.png" alt="" />
</div>
<div class="rightInfo">
<div class="title">
长城（Great Wall）额定650W
</div>
</div>
</div>
</div>
<div class="ticket_bottom">
<div class="bottom_left">
轻奢蓝
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0