喻文强的加入购物车效果(完整版，仅供参考)

最新推荐文章于 2023-04-08 22:30:45 发布

则丸

最新推荐文章于 2023-04-08 22:30:45 发布

阅读量1.6k

点赞数

分类专栏：前端技术文章标签：加入购物车特效

本文链接：https://blog.csdn.net/yuwq123/article/details/52025196

版权

前端技术专栏收录该内容

47 篇文章 1 订阅

订阅专栏

由于工作需要，花了两天时间做了个购物车效果，页面UI也是做了半天，思索了蛮久，最后效果出来，

满满的成就感！

附图：

怎么样，不错吧，附整个html加js

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>灵溪餐饮</title>
<link href="__STATIC__wap/css/index.css" rel="stylesheet" type="text/css">
<link href="__STATIC__wap/aui/css/aui.css" rel="stylesheet" type="text/css">

</head>
<body>
<div class="yuwq-fruit-subscription-823">
<volist name="list" id="val">
<div class="fruit-subscription-wrap">
<img src="{:attach($val['img'],'item')}" alt="图片1"/>
<div class="wrap">
<p class="yuwq-title overflow">{$val['title']}</p>
<p class="yuwq-price">￥<font>{$val['price']}</font></p>
<p>销量：{$val['sales']}</p>
</div>
<div class="yuwq-add-buyCard">
<i class="cut"></i>
<font>0</font>
<i class="add addnull"></i>
</div>
</div>
</volist>
</div>

<div class="yuwq-mask-713"></div>
<div class="yuwq-buyCar-orderlist-713">
<div class="order-title"><img src="__STATIC__wap/images/yuwq-canting-003.png"/>一号餐厅<font>仅提供查看订单信息功能</font></div>
<div class="order-item">

</div>

</div>

<div class="yuwq-footer-854">
<div class="foot-buycar" id="foot-buycar">
<i class="gwc-num">{$gwc_info['num'] |default="0"}</i>
</div>
<font class="gwc-price">￥<i style="font-style: normal;">{$gwc_info['price'] |default="0.00"}</i></font>
<if condition="$yiye['types'] eq 1">
<a href="">
<div class="foot-btn">在线预约</div>
</a>
<else/>
<a href="">
<div class="foot-btn">去支付</div>
</a>
</if>
</div>

<div style="height: 72px;"></div>

</body>

<script src="__STATIC__wap/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="__STATIC__wap/js/fastclick.min.js" type="text/javascript"></script>
<script src="__STATIC__wap/js/velocity.min.js" type="text/javascript"></script>
<script src="__STATIC__wap/js/jquery.fly.min.js" type="text/javascript"></script>
<script>

$(function() {
FastClick.attach(document.body);
});

$(function(){

/*获取购物车的坐标信息*/
var offset = $("#foot-buycar").offset();
/*获得加数按钮节点*/
var _thisAdd = $(".yuwq-add-buyCard .add");
/*单击加按钮事件*/
_thisAdd.on('touchstart', function(evt){

/*获得减数按钮节点*/
var _thisCut = $(this).siblings(".cut");
$(this).attr("class","add");
var _thisFont = parseInt($(this).siblings("font").text());
if(!_thisFont){
_thisFont=0;
}
$(this).siblings("font").text(++_thisFont);

/*飞入购物车特效*/
var flyer = $("<div class='addFly-745'></div>"); //抛物体对象
flyer.fly({
start: {
left: $(this).offset().left,//抛物体起点横坐标
top: $(this).offset().top //抛物体起点纵坐标
},
end: {
left: offset.left + 10,//抛物体终点横坐标
top: offset.top + 30, //抛物体终点纵坐标
},
onEnd: function() {
$("#foot-buycar").velocity("stop", true);
$("#foot-buycar").velocity({scale:1.1}, {duration: 250,easing:"ease-out"}).velocity({scale:1}, {duration: 150,easing:"ease-out"});
/*==============计算购物清单================*/
yuwqCompute();

this.destory(); //销毁抛物体
}
});

/*飞入购物车特效end*/

if(_thisCut.css("display")!="block"){

_thisCut.hide().velocity({ translateX:80,opacity:0,rotateZ:540}, { duration: 0});
_thisCut.fadeIn(0).velocity({ translateX:0,opacity:1,rotateZ:0}, { duration: 400,easing:"ease-out"});
$(this).siblings("font").fadeIn(400);

}

/*设置初始秒*/
var _thisSecond = 0;
/*指针重定义*/
var _TH = $(this);
/*长按事件*/
var A = setInterval(function(){

_thisSecond = _thisSecond+100;
if(_thisSecond>1200){
_thisFont++;
_TH.siblings("font").text(_thisFont);
/*飞入购物车特效*/
var flyer2 = $("<div class='addFly-745'></div>"); //抛物体对象
flyer2.fly({
start: {
left: _TH.offset().left,//抛物体起点横坐标
top: _TH.offset().top //抛物体起点纵坐标
},
end: {
left: offset.left + 10,//抛物体终点横坐标
top: offset.top + 30, //抛物体终点纵坐标
},
onEnd: function() {
$("#foot-buycar").velocity("stop", true);
$("#foot-buycar").velocity({scale:1.1}, {duration: 250,easing:"ease-out"}).velocity({scale:.9}, {duration: 150,easing:"ease-out"});
$("#foot-buycar").velocity({scale:1.05}, {duration: 250,easing:"ease-out"}).velocity({scale:1}, {duration: 150,easing:"ease-out"});

/*==============计算购物清单================*/
yuwqCompute();

this.destory(); //销毁抛物体
}
});
}

},100);

/*用户松开触摸手指*/
$(this).on('touchend', function (evt) {

/*清除定时器*/
clearInterval(A);

});

});

/*获得减号按钮节点*/
var _thisCut1 = $(".yuwq-add-buyCard .cut");
/*单击减号按钮事件*/
_thisCut1.on('touchstart', function (evt) {
var _thisFont1 = parseInt($(this).siblings("font").text());
if(_thisFont1-1>0){

$(this).siblings("font").show().text(--_thisFont1);

}else{

$(this).siblings(".add").attr("class","add addnull");
$(this).velocity({ translateX:80,opacity:0,rotateZ:540}, { duration: 400,easing:"ease-in"});
$(this).fadeOut(400);
$(this).siblings("font").fadeOut(400).text("0");

}

/*==============计算购物清单================*/
yuwqCompute();

/*设置初始秒*/
var _thisSecond = 0;
/*指针重定义*/
var _TH = $(this);
/*长按事件*/
var A = setInterval(function(){

_thisSecond = _thisSecond+100;
if(_thisSecond>1200){
_thisFont1--;

_TH.siblings("font").text(_thisFont1);
if(_thisFont1<=1){

/*==============计算购物清单================*/
yuwqCompute();
/*清除定时器*/
clearInterval(A);
}
/*==============计算购物清单================*/
yuwqCompute();
}

},100);

/*用户松开触摸手指*/
$(this).on('touchend', function (evt) {

/*清除定时器*/
clearInterval(A);

});

});

/*获得购物车节点*/
var _thisCar = $("#foot-buycar");
/*获取遮罩层节点*/
var _thisMask = $(".yuwq-mask-713");
/*获取订单列表*/
var _thisOrderList = $(".yuwq-buyCar-orderlist-713");
/*定义一个bool类型*/
var _bool = false;
/*购物车节点的单击事件*/
_thisCar.on('touchstart',function(evt){

/*获取当前购物车节点内的数值*/
var _CarNum = _thisCar.find(".gwc-num").text();
if(parseInt(_CarNum)<=0){
return; //没有货就跳出
}

if(_bool){
return; //已经打开了就跳出
}else{
_thisMask.fadeIn(300);
_thisOrderList.hide().velocity({ translateY:500,opacity:0}, { duration: 0});
_thisOrderList.delay(200).fadeIn(0).velocity({ translateY:0,opacity:1}, { duration: 400,easing:"ease-out"});
_bool = true;

/*生成订单*/
yuwqOrders();

}

});

/*单击遮罩层关闭*/
_thisMask.on('touchstart',function(evt){

_thisOrderList.velocity({ translateY:500,opacity:0}, { duration: 500});
_thisOrderList.delay(500).fadeOut(0);
_thisMask.delay(300).fadeOut(300);
_bool = false;

});

});

/*金额格式化*/
function formatPrice(s){

s=(s+".00").replace(/(\d*\.\d\d)\d*/,"$1");
s=s.replace(".",",");
var re=/(\d)(\d{3},)/;
while(re.test(s))
s=s.replace(re,"$1,$2");
s=s.replace(/,(\d\d)$/,".$1");
return s.replace(/^\./,"0.")
}

/*底部信息计算*/
function yuwqCompute(){

/*计算菜品表的数量*/
var _wrapLength = $(".fruit-subscription-wrap").length;
/*声明一个计算数量的值*/
var _numBuy = 0;
/*声明一个计算总价的值*/
var _priceBuy = 0;
for(var i = 0 ; i < _wrapLength ; i++){

var _num = $(".fruit-subscription-wrap").eq(i).find(".yuwq-add-buyCard font").text();
_numBuy = _numBuy + parseInt(_num);
var _price = $(".fruit-subscription-wrap").eq(i).find(".yuwq-price font").text();
_priceBuy = _priceBuy + parseInt(_num) * parseFloat(_price);

}

/*返回页面显示订单数量*/
$("#foot-buycar .gwc-num").text(_numBuy);
/*返回页面显示订单总价值*/
$(".gwc-price i").text(formatPrice(_priceBuy));

}

/*生成订单的方法*/
function yuwqOrders(){

/*订单集合节点*/
var _thisItem = $(".yuwq-buyCar-orderlist-713 .order-item");
/*首先清除订单*/
_thisItem.html("");

/*计算菜品表的数量*/
var _wrapLength = $(".fruit-subscription-wrap").length;
for(var i = 0 ; i < _wrapLength ; i++){

/*获取该菜品的数量订单*/
var _num = $(".fruit-subscription-wrap").eq(i).find(".yuwq-add-buyCard font").text();
if(parseInt(_num)>0){

/*获取该菜品的名称*/
var _name = $(".fruit-subscription-wrap").eq(i).find(".yuwq-title").text();
/*获取该菜品的单价*/
var _price = $(".fruit-subscription-wrap").eq(i).find(".yuwq-price font").text();
/*计算已点该菜品的总价*/
var _totalPrice = parseInt(_num)*parseFloat(_price);
/*加入的信息预定义*/
var _info = "<div class='order-wrap'><div class='wrap-title'>"+_name+"</div><div class='wrap-num'>×<font>"+_num+"</font></div><div class='wrap-price'>￥"+formatPrice(_totalPrice)+"</div></div>"
/*为订单集合生成一条订单信息*/
_thisItem.append(_info);

}

}

}

</script>

</html>

想想html都给了，也不差css了，css有点多，不想看的可以略过，应该有可鉴之处

-------------------------------------------------以下是css-------------------------------------------------------------------

/*reset*/
*{ font-family: "黑体";}
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,th,td,form,input,select,textarea,pre{padding:0;margin:0;}
em{font-style:normal;}
li{list-style:none;}
a{text-decoration:none;}
img{border:none;vertical-align:top;}
table{border-collapse:collapse;}
input,textarea,select{outline:none;}
textarea{resize:none;overflow:auto;}

/*喻文强水果认购默认样式*/
.yuwq-fruit-subscription-823{

width: 100%;
box-sizing: border-box;
padding: 0 10px;
padding-top: 10px;

}

.yuwq-fruit-subscription-823 .fruit-subscription-wrap{

width: 100%;
height: 84px;
overflow: hidden;
margin-bottom: 10px;
box-sizing: border-box;
padding-left: 94px;
position: relative;

}

.yuwq-fruit-subscription-823 .fruit-subscription-wrap img{

width: 84px;
height: 84px;
position: absolute;
left: 0;
top: 0;

}

.yuwq-fruit-subscription-823 .fruit-subscription-wrap .wrap{

width: 100%;
height: 84px;
box-sizing: border-box;
padding: 6px 0;

}

.yuwq-fruit-subscription-823 .fruit-subscription-wrap .wrap p{

width: 100%;
height: 24px;
line-height: 24px;
overflow: hidden;
letter-spacing: 1px;
color: #777;
font-size: 12px;

}

.yuwq-fruit-subscription-823 .fruit-subscription-wrap .wrap p:nth-child(2){

color: #f55;

}

.yuwq-fruit-subscription-823 .fruit-subscription-wrap .wrap p:nth-child(3){

color: #a8a8a8;
}

.yuwq-fruit-subscription-823 .yuwq-add-buyCard{

width: 90px;
height: 25px;
line-height: 25px;
position: absolute;
right: 0px;
bottom: 4px;
position: absolute;
text-align: center;
font-size: 13px;
color: #777;

}

.yuwq-fruit-subscription-823 .yuwq-add-buyCard i{

display: block;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #1c1;
position: absolute;
top: 0;
box-sizing: border-box;
font-style: normal;
color: #fff;
border: 1px solid #d2d2d2;

}

.yuwq-fruit-subscription-823 .yuwq-add-buyCard i.cut{

left: 0;
background-color: #fff;
display: none;

}

.yuwq-fruit-subscription-823 .yuwq-add-buyCard i.add{

right: 0;
border-color: #1c1;

}

.yuwq-fruit-subscription-823 .yuwq-add-buyCard i.cut:after{

content: "";
display: block;
width: 12px;
height: 2px;
border-radius: 2px;
background-color: #1c1;
position: absolute;
left: 50%;
top: 50%;
margin-left: -6px;
margin-top: -1px;

}

.yuwq-fruit-subscription-823 .yuwq-add-buyCard i.add:before,
.yuwq-fruit-subscription-823 .yuwq-add-buyCard i.add:after{

content: "";
display: block;
border-radius: 2px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;

}

.yuwq-fruit-subscription-823 .yuwq-add-buyCard i.add:before{

content: "";
display: block;
width: 2px;
height: 12px;
margin-left: -1px;
margin-top: -6px;

}

.yuwq-fruit-subscription-823 .yuwq-add-buyCard i.add:after{

content: "";
display: block;
width: 12px;
height: 2px;
margin-left: -6px;
margin-top: -1px;

}

.yuwq-fruit-subscription-823 .yuwq-add-buyCard font{

letter-spacing: 1px;
text-align: center;
display: none;

}

.yuwq-fruit-subscription-823 .yuwq-add-buyCard i.add.addnull{

border-color: #d2d2d2;
background-color: #fff;

}

.yuwq-fruit-subscription-823 .yuwq-add-buyCard i.add.addnull:before,
.yuwq-fruit-subscription-823 .yuwq-add-buyCard i.add.addnull:after{

background-color: #1c1;

}

/*喻文强的抛物线对象*/
.addFly-745{

width: 25px;
height: 25px;
border-radius: 50%;
background-color: #1c1;
position: relative;
font-style: normal;
color: #fff;

}

.addFly-745:before,
.addFly-745:after{

content: "";
display: block;
border-radius: 2px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;

}

.addFly-745:before{

content: "";
display: block;
width: 2px;
height: 12px;
margin-left: -1px;
margin-top: -6px;

}

.addFly-745:after{

content: "";
display: block;
width: 12px;
height: 2px;
margin-left: -6px;
margin-top: -1px;

}

/*喻文强的灵溪餐饮遮罩层*/
.yuwq-mask-713{

width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: rgba(0,0,0,.6);
z-index: 990;
display: none;

}

/*喻文强的灵犀餐饮订单列表样式*/
.yuwq-buyCar-orderlist-713{

width: 100%;
max-height: 80%;
overflow-y: scroll;
position: fixed;
bottom: 54px;
box-sizing: border-box;
padding-bottom: 24px;
background-color: #f0f0f0;
z-index: 998;
display: none;

}

.yuwq-buyCar-orderlist-713 .order-title{

width: 100%;
height: 42px;
line-height: 42px;
position: relative;
text-indent: 36px;
font-size: 13px;
letter-spacing: 2px;
color: #222;

}

.yuwq-buyCar-orderlist-713 .order-title font{

display: inline-block;
font-size: 12px;
color: #1c1;
-webkit-transform: scale(.75) translateX(-62px);
transform: scale(.75) translateX(-62px);

}

.yuwq-buyCar-orderlist-713 .order-title:after{

content: "";
display: block;
width: 100%;
height: 1px;
background-color: #e2e2e2;
position: absolute;
bottom: 0;
left: 0;
-webkit-transform: scaleY(.8);
transform: scaleY(.8);

}

.yuwq-buyCar-orderlist-713 .order-title img{

width: 20px;
height: 20px;
position: absolute;
left: 8px;
top: 50%;
margin-top: -10px;

}

.yuwq-buyCar-orderlist-713 .order-item .order-wrap{

width: 100%;
height: 48px;
line-height: 48px;
position: relative;
box-sizing: border-box;
padding-left: 32px;

}

.yuwq-buyCar-orderlist-713 .order-item .order-wrap:before{

content: "";
display: block;
width: 4px;
height: 4px;
background-color: #1c1;
position: absolute;
top: 22px;
left: 15px;
border-radius: 50%;
-webkit-transform: scale(.6);
transform: scale(.6);

}

.yuwq-buyCar-orderlist-713 .order-item .order-wrap:after{

content: "";
display: block;
width: 100%;
height: 1px;
background-color: #e2e2e2;
position: absolute;
bottom: 0;
left: 0;
-webkit-transform: scaleY(.8);
transform: scaleY(.8);

}

.yuwq-buyCar-orderlist-713 .order-wrap >div{

float: left;

}

.yuwq-buyCar-orderlist-713 .order-wrap .wrap-title{

width: 50%;
overflow: hidden;
font-size: 13px;
color: #222;
letter-spacing: 2px;

}

.yuwq-buyCar-orderlist-713 .order-wrap .wrap-num{

width: 25%;
height: 48px;
line-height: 48px;
overflow: hidden;
font-size: 12px;
color: #222;
letter-spacing: 2px;
text-align: right;
box-sizing: border-box;
padding-right: 12px;

}

.yuwq-buyCar-orderlist-713 .order-wrap .wrap-price{

width: 25%;
height: 48px;
line-height: 48px;
overflow: hidden;
font-size: 12px;
color: #1c1;
letter-spacing: 1px;
text-align: right;
box-sizing: border-box;
padding-right: 12px;

}

则丸

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
喻文强的加入购物车效果(完整版，仅供参考)

$(function() { FastClick.attach(document.body);});$(function(){/*获取购物车的坐标信息*/var offset = $("#foot-buycar").offset();/*获得加数按钮节点*/var _thisAdd = $(".yuwq-add-buyCard .add");/*单
复制链接

扫一扫