首页 > Web开发 > 详细

jquery加入购物车飞入的效果

时间:2015-03-25 16:36:49      阅读:323      评论:0      收藏:0      [点我收藏+]

主要原理是:点击当前图片的时候,复制(克隆)当前图片在当前位置,然后利用jQuery的animate()方法实现图像的飞入效果

效果预览:http://runjs.cn/detail/qmf0mtm1

    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).parent().append($(obj).clone());
        $(obj).animate({ "left": ($("#posBtnR", parent.document).offset().left - $("#posBtnR", parent.document).width()) + "px", "top": $("#posBtnR", parent.document).offset().top + "px", "width": "100px", "height": "70px" }, 1000, function () {
            $(obj).animate({ "left": $("#posBtnR", parent.document).offset().left + "px", "top": $("#posBtnR", parent.document).offset().top + "px" }, 1000);
            num++;
            $("#btn_num", parent.document).text(num).animate({ opacity: 1, marginTop: 0 }, 500, function () {
                setTimeout(function () { $("#btn_num", parent.document).hide() }, 8000);
            });
        });
    }

 

jquery加入购物车飞入的效果

原文:http://www.cnblogs.com/wanliyuan/p/4365849.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!