利用 jquery.fly.min.js 實(shí)現(xiàn)一個(gè)超簡(jiǎn)單的飛入效果倚舀，模擬購(gòu)物車特效无埃。
HTML 代碼：
<html>
<head>
<meta charset="utf-8">
<title>jQuery實(shí)現(xiàn)加入購(gòu)物車飛入動(dòng)畫效果</title>
<link rel="stylesheet" href="fei.css">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.fly.min.js"></script>
<script src="fei.js"></script>
</head>
<body>
<img src="down.jpg" class="feiImg">
<div onclick="addcar()">加入購(gòu)物車</div>
<div class="m-sidebar">
<span id="end">購(gòu)物車</span>
</div>
</body>
</html>
JAVASCRIPT 代碼：
function addcar() {
var offset = $("#end").offset();
var img = $(".feiImg").attr('src');
var flyer = $('<img class="u-flyer" src="' + img + '">');
flyer.fly({
start: {
left: event.pageX,
top: event.pageY
},
end: {
left: offset.left + 10,
top: offset.top + 10,
width: 0,
height: 0
}
});
}
CSS 代碼：
.m-sidebar {
position: fixed;
top: 0;
right: 0;
padding: 200px 0 0 0;
}
.u-flyer {
display: block;
width: 50px;
height: 50px;
border-radius: 50px;
position: fixed;
z-index: 9999;
}
