<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飞入动画</title>
<style>
.test{background: red;width: 50px;height:50px;}
.d1{
float: left;
margin: 100px 0 0 0;
width: 200px;
height: 200px;
background: orange;
}
.box {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div id="app" >
<!--飞入插件-->
<div @click="fly" class="box">飞入插件</div>
</div>
<script src="jquery.js"></script>
<script src="fly.min.js"></script>
<script src="vue.js"></script>
<script>
// 1. 先获取终点的位置
// var globalOffsetX = $(".compare-btn").offset().left;
// var globalOffsetY = $(".compare-btn").offset().top-$(document).scrollTop();
// 2.获取点击的位置坐标 event.pageX，event.pageY-$(document).scrollTop()
// 设置飞行的图片 attr为图片的路径
// var flyer = $('<img style="width: 50px; height: 50px; border-radius:80px; z-index:999; border:1px solid orange;">');
// flyer.attr('src', attr);
// flyer.fly({
// start: {
// left: event.pageX - 140,
// top: event.pageY-$(document).scrollTop() - 110,
// },
// end: {top: globalOffsetY + 30, left: globalOffsetX + 10, width: 0, height: 0},
// onEnd: function(){
// this.destroy();
// }
// });
// demo示例
var vm = new Vue({
el: '#app',
data: function(){
return {
}
},
methods: {
fly: function(e){
console.log('X:', event.pageX);
console.log('Y:', event.pageY);
var flyer = $('<div class="test"></div>');
flyer.fly({
start: {
left: event.pageX,
top: event.pageY-$(document).scrollTop()
},
end: {
top: globalTop,
left: globalLeft,
width: 0,
height: 0,
},
onEnd: function(){
this.destroy();
}
})
},
}
});
// 飞到的终点的偏移量
var globalLeft = $('.box').offset().left;
var globalTop = $('.box').offset().top - $(document).scrollTop();
</script>
</body>
</html>
