利用 jQuery 实现飞入效果
2019-02-21 本文已影响5人
肆意木
利用 jquery.fly.min.js 实现一个超简单的飞入效果，模拟购物车特效。
HTML 代码：
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现加入购物车飞入动画效果</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()">加入购物车</div>
<div class="m-sidebar">
<span id="end">购物车</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;
}
