头像

jQuery商品快速飞入购物车

来源:http://www.sucaihuo.com/js/297.html 素材火管理员 2015-08-21 01:03浏览(661) 收藏

本文分享一款加入购物车效果
jQuery商品快速飞入购物车
分类:其它特效 > 动画效果 难易:中级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 168 下载资源 下载积分: 20 积分

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);
    });
}
标签: 购物车cart
评论5
头像

友情提示:垃圾评论一律封号...

  • 头像 4楼
    10-11 10:07
    1405366033
    购物车这个好不好呢
  • 头像 3楼
    09-05 08:46
    dlboy
    这套也喜欢~
  • 头像 板凳
    07-18 09:31
    码农
    这个实用吗
  • 头像 椅子
    11-19 07:32
    caihua888
    经典购物车
  • 头像 沙发
    10-20 08:09
    fengzil
    这个功能也不错
1 2