jquery加入购物车飞入的效果
主要原理是:点击当前图片的时候,复制(克隆)当前图片在当前位置,然后利用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); }); }); }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。