用jquery实现飞入购物车特效
原理:
获取每个商品的坐标A,和购物车的坐标B,当点击商品的时候,绑定一个事件D ,D事件内处理商品图片,并设置一个动画,让商品图片从A点 到B点 ,并且改变下图片的样式,就能达到效果,具体实现代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fly</title>
<style>
* {
padding: 0;
margin: 0;
}
.cart {
width: 100px;
height: 100px;
border: solid 1px red;
color: green;
text-align: center;
line-height: 100px;
position: fixed;
top: 0;
right: 300px;
}
.div1 {
width: 980px;
height: 100px;
background: purple;
margin: auto;
font-size: 30px;
color: red;
line-height: 100px;
text-align: center;
}
.div2 {
width: 980px;
height: auto;
margin: auto;
}
.product {
width: 100px;
height: 100px;
background: green;
margin-top: 10px;
cursor: pointer;
}
.product1 {
background: red;
}
.product2 {
background: blue;
}
.product3 {
background: greenyellow;
}
.product4 {
background: yellow;
}
.product5 {
background: green;
}
</style>
</head>
<body>
<div class="div1">欢迎来到美丽商城</div>
<div class="div2">
<div class="product product1">
</div>
<div class="product product2">
</div>
<div class="product product3">
</div>
<div class="product product4">
</div>
<div class="product product5">
</div>
</div>
<div class="cart">购物车</div>
<script src="jquery-2.2.2.min.js"></script>
<script>
$(".product").click(function () {
var x = $(this).offset().left;
var y = $(this).offset().top;
var w = $(this).width();
var h = $(this).height();
var product = $(this).clone().css('opacity', 0.75);
$(this).parent().append(product);
product.css({
'z-index': 9000,
'display': 'block',
'position': 'absolute',
'top': y + 'px',
'left': x+ 'px',
'width': w+'px',
'height': h + 'px'
});
product.animate({
top: $(".cart").offset().top,
left: $(".cart").offset().left,
width: 90,
height: 90
},'slow',function(){
product.remove();
});
});
</script>
</body>
</html>