jquery实现点击商品列表后移动到购物车图标并消失 50
类似京东商城iphone版的效果，点击商品后，商品的图标缩小移动到购物车图标的位置并消失。我是想在网页上实现类似的效果，不知道能否用JQUERY实现。...
类似京东商城iphone版的效果，点击商品后，商品的图标缩小移动到购物车图标的位置并消失。
我是想在网页上实现类似的效果，不知道能否用JQUERY实现。 展开
我是想在网页上实现类似的效果，不知道能否用JQUERY实现。 展开
2个回答
展开全部
参考 http://sc.chinaz.com/jiaoben/140526282450.htm 中的例子。
实现思路：
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" });
//用jquery的动画效果，从初始位置，变成固定width,height，移动到购物车的位置。collectBox是购车车的ID。
$(obj).animate({ "left": ($("#collectBox").offset().left - $("#collectBox").width()) + "px", "top": ($(document).scrollTop() + 30) + "px", "width": "100px", "height": "70px" }, 500, function () {
$(obj).animate({ "left": $("#collectBox").offset().left + "px", "top": $("#collectBox").offset().top + "px" }, 500).fadeTo(0, 0.1).hide(0);
});
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
