以下是 jQuery移动端购物车商品删除代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>jQuery移动端购物车商品删除代码</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/jd_cart.css">
</head>
<body>
<!--顶部通栏-->
<header class="jd_topBar">
<a href="#" class="icon_back"></a>
<h3>购物车</h3>
<a href="#"class="icon_menu"></a>
</header>
<!--安全提示-->
<div class="safety-tip">
<p class="fadeInDown animated">您正在安全购物环境中，请放心购物</p>
</div>
<!--店铺-->
<div class="jd_shop">
<div class="jd_shop_tit">
<div class="check_box">
<a href="#" class="jd_check_box"></a>
</div>
<div class="shop_info">
<div class="jd_logo f_left">
<img src="images/buy-logo.png" alt="">
<span>京东自营</span>
</div>
<div class="f_right tip m_r10">
您享受满79元免运费服务
</div>
</div>
</div>
<div class="jd_shop_con">
<div class="product">
<div class="check_box">
<a href="#" class="jd_check_box" checked></a>
</div>
<div class="shop_info clearfix">
<a href="#" class="img_box f_left"><img src="images/detail01.jpg" alt=""></a>
<div class="info_box">
<a class="p_name" href="#">1华为（HUAWEI）荣耀华为1（HUAWEI）荣耀平板优享版 Wifi 8英寸平板电脑（高通骁龙 64位四核1280×800 </a>
<p class="p_price">¥1000.00</p>
<div class="p_opition">
<div class="change_num f_left">
<span>-</span>
<input type="tel">
<span>+</span>
</div>
<div class="delete_box f_right">
<span class="delete_up"></span>
<span class="delete_down"></span>
</div>
</div>
</div>
</div>
</div>
<div class="product">
<div class="check_box">
<a href="#" class="jd_check_box" checked></a>
</div>
<div class="shop_info clearfix">
<a href="#" class="img_box f_left"><img src="images/detail01.jpg" alt=""></a>
<div class="info_box">
<a class="p_name" href="#">2华为（HUAWEI）荣耀华为（HUAWEI）荣耀平板优享版 Wifi 8英寸平板电脑（高通骁龙 64位四核1280×800 </a>
<p class="p_price">¥1000.00</p>
<div class="p_opition">
<div class="change_num f_left">
<span>-</span>
<input type="tel">
<span>+</span>
</div>
<div class="delete_box f_right">
<span class="delete_up"></span>
<span class="delete_down"></span>
</div>
</div>
</div>
</div>
</div>
<div class="product">
<div class="check_box">
<a href="#" class="jd_check_box" checked></a>
</div>
<div class="shop_info clearfix">
<a href="#" class="img_box f_left"><img src="images/detail01.jpg" alt=""></a>
<div class="info_box">
<a class="p_name" href="#">3华为（HUAWEI）荣耀华为（HUAWEI）荣耀平板优享版 Wifi 8英寸平板电脑（高通骁龙 64位四核1280×800 </a>
<p class="p_price">¥1000.00</p>
<div class="p_opition">
<div class="change_num f_left">
<span>-</span>
<input type="tel">
<span>+</span>
</div>
<div class="delete_box f_right">
<span class="delete_up"></span>
<span class="delete_down"></span>
</div>
</div>
</div>
</div>
</div>
<div class="product">
<div class="check_box">
<a href="#" class="jd_check_box" checked></a>
</div>
<div class="shop_info clearfix">
<a href="#" class="img_box f_left"><img src="images/detail01.jpg" alt=""></a>
<div class="info_box">
<a class="p_name" href="#">4华为（HUAWEI）荣耀华为（HUAWEI）荣耀平板优享版 Wifi 8英寸平板电脑（高通骁龙 64位四核1280×800 </a>
<p class="p_price">¥1000.00</p>
<div class="p_opition">
<div class="change_num f_left">
<span>-</span>
<input type="tel">
<span>+</span>
</div>
<div class="delete_box f_right">
<span class="delete_up"></span>
<span class="delete_down"></span>
</div>
</div>
</div>
</div>
</div>
<div class="product">
<div class="check_box">
<a href="#" class="jd_check_box" checked></a>
</div>
<div class="shop_info clearfix">
<a href="#" class="img_box f_left"><img src="images/detail01.jpg" alt=""></a>
<div class="info_box">
<a class="p_name" href="#">9华为（HUAWEI）荣耀华为（HUAWEI）荣耀平板优享版 Wifi 8英寸平板电脑（高通骁龙 64位四核1280×800 </a>
<p class="p_price">¥1000.00</p>
<div class="p_opition">
<div class="change_num f_left">
<span>-</span>
<input type="tel">
<span>+</span>
</div>
<div class="delete_box f_right">
<span class="delete_up"></span>
<span class="delete_down"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jd_win">
<div class="jd_win_box">
<div class="jd_win_tit">你确定删除该商品吗？</div>
<div class="jd_btn clearfix">
<a href="#" class="cancle f_left">取消</a>
<a href="#" class="submit f_right">确定</a>
</div>
</div>
</div>
<script src='js/jquery.js'></script>
<script src="js/cartjs.js"></script>
</body>
</html>JS代码(cartjs.js):
var that;
$('.delete_box').on('click',function(){
$(this).children('.delete_up').css({
transition:'all 1s','transformOrigin':"0 5px",transform:'rotate(-30deg) translateY(2px)'}
) $('.jd_win').show();
that = $(this);
}
) $('.cancle').on('click',function(){
$('.jd_win').hide();
$('.delete_up').css('transform','none')}
) $('.submit').on('click',function(){
that.parent().parent().parent().parent().remove();
$('.jd_win').hide();
}
)CSS代码(jd_cart.css):
@charset "utf-8";body{background:#f5f5f5;}
/*/
复用/*/
.jd_check_box[checked]{background-position:-25px 0;}
/*顶部*/
.jd_topBar{height:45px;background:url("../images/header-bg.png");-webkit-background-size:1px 44px;background-size:1px 44px;border-bottom:1px solid #CCCCCC;width:100%;}
.jd_topBar h3{height:44px;line-height:44px;text-align:center;font-weight:normal;font-size:18px;}
.icon_back,.icon_menu{position:absolute;top:0;background:url("../images/sprites.png");background-size:200px 200px;width:40px;height:44px;padding:12px 10px;background-origin:content-box;background-clip:content-box;}
.icon_back{left:0;background-position:-21px 0;}
.icon_menu{right:0;background-position:-60px 0;}
/*<!--安全提示-->*/
.safety-tip{height:34px;line-height:34px;width:100%;background-color:#fff;color:#666;font-size:12px;text-align:center;border-bottom:1px solid #ccc;}
.safety-tip p{position:relative;padding-left:23px;display:inline-block;}
.safety-tip p::before{content:'';position:absolute;top:7px;left:0;background:url("../images/safe_icon.png");width:18px;height:18px;-webkit-background-size:18px 18px;background-size:18px 18px;}
/*<!--店铺-->*/
.jd_shop{background:#ffffff;margin-top:10px;}
.jd_shop_tit{border-bottom:1px solid #ccc;border-top:1px solid #ccc;height:34px;line-height:34px;position:relative;}
.jd_shop .check_box{position:absolute;top:0;left:0;height:100%;width:40px;}
.jd_shop .jd_check_box{height:34px;padding:7px 10px;display:block;background-image:url("../images/shop-icon.png");background-size:50px 100px;background-position:0 0;background-clip:content-box;background-origin:content-box}
.shop_info{padding-left:41px;width:100%;height:100%;}
.shop_info .jd_logo img{width:15px;height:13px;display:inline-block;}
.jd_shop .jd_shop_con .product{border-bottom:1px solid #ccc;height:100px;position:relative;}
.shop_info{padding-left:40px;height:100%;width:100%;}
.shop_info .info_box{overflow:hidden;padding-top:10px;padding-right:10px;}
.jd_shop .shop_info .img_box{height:100px;width:90px;float:left;padding:10px;padding-left:0;}
.jd_shop .shop_info .img_box img{width:100%;height:100%;display:block;}
.info_box .p_name{line-height:15px;height:30px;width:100%;display:block;overflow:hidden;}
.info_box .p_price{padding-top:5px;color:#d8505c;font-size:12px;}
.p_opition .change_num span{width:36px;height:24px;line-height:24px;text-align:center;float:left;border:1px solid #CCCCCC;}
.p_opition .change_num span:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;}
.p_opition .change_num span:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;}
.p_opition .change_num input{float:left;border-bottom:1px solid #CCCCCC;border-top:1px solid #CCCCCC;width:36px;height:24px;text-align:center;}
.delete_box .delete_up{width:20px;height:5px;display:block;background:url("../images/delete_up.png");background-size:20px 5px;margin-left:-1px;}
.delete_box .delete_down{margin-top:-2px;width:18px;height:18px;display:block;background:url("../images/delete_down.png");background-size:18px 18px;}
/*弹出框*/
.jd_win{width:100%;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,0.6);z-index:9999;display:none;}
.jd_win_box{width:80%;padding:0 10px;border-radius:4px;background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}
.jd_win .jd_win_tit{border-bottom:1px solid #ccc;line-height:75px;text-align:center;font-size:18px;}
.jd_btn{width:100%;padding:10px 0;}
.jd_btn a{line-height:36px;width:45%;text-align:center;border-radius:4px;}
.jd_win .cancle{margin-right:10%;border:1px solid #ccc;}
.jd_win .submit{background:#d8505c;color:#fff;}
.move{animation:mymove 1s;}
@keyframes mymove{0%{opacity:0;transform:translate3d(-50%,-500%,0);-webkit-transform:translate3d(-50%,-500%,0);}
60%{opacity:1;transform:translate3d(-50%,-50%,0);-webkit-transform:translate3d(-50%,-50%,0);}
75%{opacity:1;transform:translate3d(-50%,-45%,0);-webkit-transform:translate3d(-50%,-45%,0);}
90%{opacity:1;transform:translate3d(-50%,-54%,0);-webkit-transform:translate3d(-50%,-54%,0)}
100%{opacity:1;transform:translate3d(-50%,-50%,0);-webkit-transform:translate3d(-50%,-50%,0);}
}
CSS代码(reset.css):
/*����Ĭ����ʽt*/
*,::before,::after{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{font-size:14px;min-width:320px;}
ol,ul{list-style:none;}
a{text-decoration:none;color:#333333;}
a:hover{color:#333333;}
textarea,input{outline:none;border:none;-webkit-appearance:none;}
/*����*/
.f_left{float:left;}
.f_right{float:right;}
.clearfix::before,.clearfix::after{content:"";display:block;line-height:0;visibility:hidden;clear:both;height:0;}
.m_r10{margin-right:10px;}
.ml10{margin-left:10px;}
/*����ͼ��*/
[class^='icon_'],[class*=' icon_']{background-image:url("../images/sprites.png");background-size:200px 200px;}
分享到QQ
分享到微博
微信扫一扫
