添加"飞"的动画效果
需要 jquery.fly.min.js 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="https://metrix.sh.intel.com/sqe/js/jquery.min.js"></script>
<script src="./jquery.fly.min.js"></script>
<style>
.box{
float:left;
/* width:198px; */
/* height:320px; */
padding: 5px;
margin-left:5px;
border:1px solid blue;
text-align:center
}
.box p{
line-height:20px;
padding:4px 4px 10px 4px;
text-align:left
}
.box:hover{
border:1px solid #f90
}
.m-sidebar{
position: fixed;
top: 0;
right: 0;
background: #000;
z-index: 2000;
width: 35px;
height: 100%;
font-size: 12px;
color: #fff;
}
.cart{
color: #fff;
text-align:center;
line-height: 20px;
padding: 200px 0 0 0px;
}
.cart span{
display:block;
width:20px;
margin:0 auto;
}
.cart i{
width:35px;
height:35px;
display:block;
}
#msg{
position:fixed;
top:300px;
right:35px;
z-index:10000;
width:1px;
height:52px;
line-height:52px;
font-size:20px;
text-align:center;
color:#fff;
background:#360;
display:none
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="button orange addcar">add to Shopping Cart</a>
</div>
<div class="box">
<a href="#" class="button orange addcar">add to Shopping Cart</a>
</div>
<div class="box">
<a href="#" class="button orange addcar">add to Shopping Cart</a>
</div>
<div class="box">
<a href="#" class="button orange addcar">add to Shopping Cart</a>
</div>
<!-- 然后，我们还需要在页面的右侧加上购物车以及提示信息。 -->
<div class="m-sidebar">
<div class="cart">
<i id="end"></i>
<span>Shopping Cart</span>
</div>
</div>
<div id="msg">successfully added to cart!</div>
</body>
<script>
$(function() {
var offset = $("#end").offset();
$(".addcar").click(function(event){
var addcar = $(this);
console.log(addcar);
// var img = addcar.parent().find('img').attr('src');
var flyer = $('<span style="display:inline-block;width:20px;height:20px;border-radius:100%;background:red;text-align:center;line-height:20px;color:#fff;font-weight:600;">1</span>');
flyer.fly({
start: {
left: event.pageX, //开始位置（必填）#fly元素会被设置成position: fixed
top: event.pageY //开始位置（必填）
},
end: {
left: offset.left+10, //结束位置（必填）
top: offset.top+10, //结束位置（必填）
width: 10, //结束时宽度
height: 10 //结束时高度
},
// speed:1.0,
onEnd: function(){ //结束回调
$("#msg").show().animate({width: '250px'}, 500).fadeOut(1000); //提示信息
// addcar.unbind('click');
// this.destory(); //移除dom
}
});
});
});
</script>
</html>
