原生:点击加入购物车的动画

2018-01-13 11:05:02来源:segmentfault作者:yuezhongbao人点击

分享


HTML


<div>
<div>
<span><i></i></span>
<div></div>
<div>
<div>
<div>
<img src="images/item2.jpg" alt="item" />
</div>
<h3>Unique Color Wedges </h3>
<h6>Nemo enim ipsam voluptatem quia voluptassit aspernatur aut odit aut fugit, sed quia.</h6>
<p>Price : <span>$29</span></p>
<button type="button">加入购物车</button>
<div></div>
</div>
<div></div>
</div>
</div>
</div>

javascript


<script>
$('.add-to-cart').on('click', function () {
var cart = $('.shopping-cart');
var imgtodrag = $(this).parent('.item').find("img").eq(0);
if (imgtodrag) {
var imgclone = imgtodrag.clone()
.offset({//.offset()方法获取匹配元素在当前视口的相对偏移
top: imgtodrag.offset().top,
left: imgtodrag.offset().left
})//克隆后图片的top等于之前的offset().top;left等于之前的offset().left;说明克隆后图片位置和原图片位置相同
.css({
'opacity': '0.5',
'position': 'absolute',
'height': '150px',
'width': '150px',
'z-index': '100'
})
.appendTo($('body'))
.animate({
'top': cart.offset().top + 10,
'left': cart.offset().left + 10,//位置过渡到购物车旁边
'width': 75,//此时大小也随之变小
'height': 75
}, 1000, 'easeInOutExpo');imgclone.animate({
'width': 0,
'height': 0
}, function () {
$(this).detach()//detach() 方法移除被选元素,包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。
});
}
});
</script>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台