jQuery商品快速飞入购物车

收藏

本文分享一款加入购物车效果

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

<div class="thingsBox"> 
    <img src="images/14.jpg" onClick="MoveBox(this)" /> 
</div> 
<div class="thingsBox"> 
    <img src="images/15.jpg" onClick="MoveBox(this)" /> 
</div> 
<div class="thingsBox"> 
    <img src="images/16.jpg" onClick="MoveBox(this)" /> 
</div> 
<div class="thingsBox"> 
    <img src="images/17.jpg" onClick="MoveBox(this)" /> 
</div> 
<div class="thingsBox"> 
    <img src="images/1.jpg" onClick="MoveBox(this)" /> 
</div>

jQuery加入购物车动画

function MoveBox(obj) { 
    var divTop = $(obj).offset().top; 
    var divLeft = $(obj).offset().left; 
    $(obj).css({ 
        "position": "absolute", 
        "z-index": "500", 
        "left": divLeft + "px", 
        "top": divTop + "px" 
    }); 
    $(obj).animate({ 
        "left": ($("#collectBox").offset().left - $("#collectBox").width()) + "px", 
        "top": ($(document).scrollTop() + 30) + "px", 
        "width": "80px", 
        "height": "30px" 
    }, 
    500, 
    function() { 
        $(obj).animate({ 
            "left": $("#collectBox").offset().left + "px", 
            "top": $("#collectBox").offset().top + "px", 
            "width": "50px", 
            "height": "25px" 
        }, 
        500).fadeTo(0, 0.1).hide(0); 
    }); 
}