jQuery手机端购物车商品删除效果代码



153 609 204



特效描述:购物车 商品删除效果,jQuery点击垃圾桶,删除购物车里的对应物品

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/animate.css"/>
<link rel="stylesheet" href="css/jd_cart.css"/>

2. 引入JS

<script src='js/jquery.js'></script>
<script src="js/cartjs.js"></script>

3. HTML代码

<!--顶部通栏-->
    <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">&yen;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">&yen;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">&yen;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">&yen;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">&yen;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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到