<!DOCTYPE html>
<html>
<head>
<title>jQuery������빺�ﳵ������Ч - վ���ز�</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="content">
<div class="con-top"></div>
<div class="con-bot"></div>
<div class="fly-cart">
<div class="wrapper">
<span><i class="shopping-cart"></i></span>
<div class="clear"></div>
<div class="items">
<div class="item fly-item1">
<div class="item-img">
<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 class="add-to-cart" type="button">Add to cart</button>
<div class="clear"></div>
</div>
<div class="item fly-item2">
<div class="item-img">
<img src="images/item1.jpg" alt="item" />
</div>
<h3>Hansx Women Wedges</h3>
<h6>Nemo enim ipsam voluptatem quia voluptassit aspernatur aut odit aut fugit, sed quia.</h6>
<p>Price : <span>$29</span></p>
<button class="add-to-cart" type="button">Add to cart</button>
<div class="clear"></div>
</div>
<div class="item fly-item3">
<div class="item-img">
<img src="images/item3.jpg" alt="item" />
</div>
<h3>Niremo Beige Wedges</h3>
<h6>Nemo enim ipsam voluptatem quia voluptassit aspernatur aut odit aut fugit, sed quia.</h6>
<p>Price : <span>$29</span></p>
<button class="add-to-cart" type="button">Add to cart</button>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<script src="js/jquery-ui.min.js"></script>
<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({
top: imgtodrag.offset().top,
left: imgtodrag.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()
});
}
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>�����������IE8��360��FireFox��Chrome��Safari��Opera�����Ρ��ѹ�������֮��.</p>
<p>��Դ��<a href="http://www.moobnn.com/" target="_blank">վ���ز�</a></p>
</div>
</body>
</html>
jQuery点击加入购物车动画特效.zip
版权申诉
66 浏览量
2022-11-20
22:07:51
上传
评论
收藏 432KB ZIP 举报
jQuery点击加入购物车动画特效.zip （9个子文件） 
jQuery点击加入购物车动画特效 
jQuery点击加入购物车动画特效.jpg 71KB jiaoben4217 css 
style.css 8KB images 
shoping_cart1.png 4KB item1.jpg 106KB item2.jpg 109KB item3.jpg 117KB
index.html 3KB js jquery.min.js 91KB jquery-ui.min.js 223KB资源评论
