Html5 jQuery手机端购物车_Html5购物车模板代码
2016-09-08 14:13:45  By: dwtedx

• dwtedx
• HTML5开发
• 0
• 2939
• 8

分享一个jQuery移动端购物车商品的代码、Demo中实现了删除的功能、Demo是一款兼容PC端跟手机端的自适应的、点击垃圾桶删除购物车里的对应物品特效、效果非常不错、下面是Demo的效果图

Html代码

<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>

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();
})

手机购物车html源代码下载链接: 手机html5购物车模板 密码: n9ip

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛