<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script src="TweenMax.min.js"></script>
<style>
.div{position: absolute; 200px;height: 200px;top: 0;left: 0;}
.div2{ 40px;height: 30px;background-color:pink;border-radius: 50%;}
</style>
</head>
<body>
</body>
</html>
<script>
//目标位置
var tx=500,ty=50;
function move(obj,x,y){
var t = new TimelineMax();
// tweenmax-bezier曲线 staggerTo可以元素一起运动
t.staggerTo(obj,1,{
// bezier函数返回数组 只有 staggerTo 才可以使用 cycle
cycle : {
bezier : function(){
var max=Math.max(tx,x);
var min=Math.min(tx,x);
var val=(max-min)*0.5+min;
return [
{top:y,left:x},
{top:Math.min(y,ty)*0.5,left:val},
{top:ty,left:tx},
]
}
},
onComplete:function(){
$(obj).fadeOut(function(){
$(this).remove();
});
}
}
);
}
var i=0;
$(document).on("click",function(e){
var x=e.pageX,
y=e.pageY;
console.log(x,y);
$('<div class="div div2 div2'+i+'"></div>').appendTo("body").css({top:y,left:x});
move(".div2"+i,x,y);
i++;
});
</script>