码迷,mamicode.com
首页 > 其他好文 > 详细

tweenMax实体抛物线

时间:2017-09-08 01:19:07      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:lin   pos   tag   位置   jquery   ade   src   曲线   ++   

<!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;width: 200px;height: 200px;top: 0;left: 0;}  
    .div2{width: 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>

 

tweenMax实体抛物线

标签:lin   pos   tag   位置   jquery   ade   src   曲线   ++   

原文地址:http://www.cnblogs.com/zhangzhicheng/p/7492531.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!