jquery制作的移动端购物车效果完整示例
(编辑：jimmy 日期: 2024/11/8 浏览：3 次 )
本文实例讲述了jquery制作的移动端购物车效果。分享给大家供大家参考，具体如下：
html部分
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物详情</title>
<link rel="stylesheet" href="index.css" rel="external nofollow" >
<meta name="viewport" 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 class="main">
<ul class="main_shop">
<li class="shop_list">
<div class="checked">
<div class= "checks"></div>
</div>
<div class="content">
<div class="content_top">
<div class="img">
<img src="/UploadFiles/2021-04-02/9288714270450521_300.jpg">
js
<script src="/UploadFiles/2021-04-02/jquery.js">
index.js：
$(function () {
$(".mrnus").click(function () {
shopAdd($(this));
che();
})
$(".add").click(function () {
shopAdd($(this));
che();
})
$(".checks").click(function(){
checked($(this));
che();
})
$("#quan").click(function() {
quan();
})
})
function shopAdd(obj) {
// console.log(obj)
if(obj.html() == "+"){
// alert("jia")
let num = parseInt(obj.prev().html());
num++;
obj.prev().html(num);
// 改变价格
// 判断是否选中
if (obj.parent().parent().parent().parent().parent().parent().parent().find(".checks").html() !=""){
let pricr = parseInt(obj.parent().prev().find(".mon").html());
// console.log(pricr);
let money = parseInt($("#money").html());
money += pricr;
// console.log(price)
$("#money").html(money);
}
} else if (obj.html() == "-"){
// alert("j")
let num = parseInt(obj.next().html());
num--;
if(num <= 0){
num = 0;
// return;
}
obj.next().html(num);
// 改变价格
// 判断是否选中
if (obj.parent().parent().parent().parent().parent().parent().parent().find(".checks").html() != "") {
let price2 = parseInt(obj.parent().prev().find(".mon").html());
// console.log(pricr);
let money = parseInt($("#money").html());
money -= price2;
// console.log(price)
$("#money").html(money);
}
}
}
// 选择
function checked(checks) {
// console.log(checks.html())
if (checks.html() == ""){
checks.css({"background":"red"})
checks.html("√");
money(checks);
}else{
checks.css("background","white")
checks.html("");
money(checks,1);
}
}
function money(obj,x){
// alert(obj)
let price = parseInt(obj.parent().parent().find(".mon").html());
let content = parseInt(obj.parent().next().find(".cont").html());
// console.log(content)
if(x != null){
price *= -1 ;
}
let money= parseInt($("#money").html());
money += price * content;
// console.log(price)
$("#money").html(money);
}
function che(){
let ches = $(".checks");
// console.log(ches.size())
}
function quan() {
if($("#quan").attr("index") == 0){
$("#quan").attr("index","1")
$(".checks").css({ "background": "red" })
$(".checks").html("√");
$("#quan").css({ "background": "red" })
$("#quan").html("√");
$(".btn span").html("11")
}else{
$("#quan").attr("index", "0")
$(".checks").css({ "background": "white" })
$(".checks").html("");
$("#quan").css({ "background": "white" })
$("#quan").html("");
$(".btn span").html("0")
}
}
css
@charset "utf-8";
*{
margin:0;
padding:0;
}
html{
font-size:22.67vw;
/* font-family: "黑体"; */
}
html,body{
height: 100%;
background-color: #f4f4f4;
}
body{
height: 100%;
background-color: #f4f4f4;
font-family:"微软雅黑";
display: -webkit-flex;
flex-direction: column;
}
a{
text-decoration:none;
}
ul,ol{
list-style:none;
}
img{
border:0;
display: block;
}
header{
background: #fff9eb;
height: 0.4rem;
font-size: 12px;
padding-left: .1rem;
display: flex;
align-items: center;
border-bottom: 1px solid #ffd6a0;
}
header h3{
font-weight: normal;
}
header h3 span{
color: #ff695a;
}
/* main--------------------------*/
.main{
display: flex;
flex:1;
overflow: auto;
margin-top: .1rem;
background: #ffffff;
}
.main_shop{
width: 100%;
flex-direction: column;
}
.shop_list{
width: 100%;
height: 1.3rem;
border-bottom:1px solid #dddddd;
display: flex;
justify-content: space-between;
align-items: center;
}
.checked{
width: 10%;
height: 100%;
}
.checked div{
width: 0.17rem;
height: 0.17rem;
border:1px solid #cdcdcd;
border-radius: 50%;
margin-top: .43rem;
margin-left: .1rem;
font-size: 12px;
color: white;
text-align: center;
line-height: .17rem;
}
.content{
flex: 1;
height: 100%;
}
.content_top{
width:100%;
height: 1rem;
display: flex;
}
.img , img{
width: .75rem;
height: 100%;
}
.text{
flex: 1;
height: 100%;
font-size: 12px;
padding-right:.16rem;
padding-left: .15rem;
}
.tit{
display: flex;
align-items: center;
justify-content: space-between;
height:.38rem;
}
.tit p{
font-size: .15rem;
color:#333333;
}
.tit div{
width:.15rem;
height: .17rem;
background: url("shop/remove.jpg");
background-size: cover;
}
.down{
height: 0.17rem;
width: 0.41rem;
color: #11b57c;
border:2px solid #11b57c;
border-radius: .08rem;
text-align: center;
line-height: .17rem;
margin-top: .11rem;
}
.price{
display: flex;
height: .3rem;
align-items: center;
justify-content: space-between;
font-size: .12rem;
font-weight: 900;
}
.price_left span:first-child{
color: #ff695a;
display:inline-block;
margin-right: 5px;
}
.mon{
color: #ff695a;
display:inline-block;
margin-right: 5px;
}
.price_left span:last-child{
color: #cecece;
}
.price_right{
display: flex;
justify-content: space-around;
align-items: center;
width: .77rem;
height: .22rem;
border:1px solid #dddddd;
border-radius: 5px;
}
.price_right div{
flex:1;
text-align: center;
}
.price_right div:nth-child(2){
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
.content_bottom{
width:100%;
height: .3rem;
border-top: 1px solid #dddddd;
display:flex;
justify-content: flex-start;
align-items: center;
}
.content_bottom p{
font-size: .13rem;
color:#808080;
font-weight: 800;
}
.content_bottom p span{
font-size: .13rem;
color:#cccccc;
padding-left: 10px;
}
/* car */
.car{
height: 0.48rem;
width: 100%;
border-top: 1px solid #d5d5d5;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}
.car_left{
height: 100%;
display: flex;
align-items: center;
}
.car_left div{
width: 0.17rem;
height: 0.17rem;
border: 1px solid #cdcdcd;
border-radius: 50%;
margin-left: .1rem;
text-align: center;
line-height: .17rem;
margin-right: 10px;
}
.car_right{
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.te p:first-child{
font-size: 12px;
font-weight: 900;
}
.te p:first-child span{
color: #ff6353;
}
.btn{
width: 1.1rem;
height:100%;
background:#ff6353;
color:white;
font-size: .17rem;
text-align: center;
line-height: .5rem;
}
.te p:last-child span{
color: #999999;
}
/* footer 999999*/
footer{
height: 0.48rem;
width: 100%;
border-top: 2px solid #d5d5d5;
background: #fff;
}
footer ul{
display: flex;
justify-content: space-around;
align-items: center;
margin-top:6px;
}
footer ul li{
font-size: 12px;
color:#8d8a8a;
}
footer ul li img{
width: 0.25rem;
height: 0.22rem;
}
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
下一篇：jquery实现的放大镜效果示例