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