无线随机运动-原生JS详解

让一个块在页面中无线随机运动
相当于不停地给物体一个随机的目标
无线随机运动-原生JS详解_第1张图片

<style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                left: 0;
                top: 0;
            }
style>
<body>
        <div id="target">div>
body>
<script>
//封装运动函数;
function getStylecss(obj,oStyle){
            if(obj.currentStyle){
                return obj.currentStyle[oStyle];
            }else{
                return getComputedStyle(obj,false)[oStyle];
            }
        }


        function motion(obj,json,options){
            options=options || {};
            options.time=options.time || 1000;
            options.easing=options.easing || 'linear';
            clearInterval(obj.timer);

            var start={};
            var distance={};
            for(var name in json){
                    start[name]=parseFloat(getStylecss(obj,name));
                    if(isNaN(start[name])){
                        switch(name){
                            case 'left':
                            start[name]=obj.offsetLeft;
                            break;
                            case 'top':
                            start[name]=obj.offsetTop;
                            break;
                            case 'right':
                            start[name]=obj.offsetRight;
                            break;
                            case 'bottom':
                            start[name]=obj.offsetBottom;
                            break;
                        }
                    }
                    distance[name]=json[name]-start[name];
            }

            var n=0;
            var count=Math.floor(options.time/30);

            obj.timer=setInterval(function(){
                n++;

                for(var name in json){
                    switch(options.easing)
                    {
                        case 'linear':
                            var a=n/count;
                            var cur=start[name]+distance[name]*a;
                            break;
                        case 'ease-in':
                            var a=n/count;
                            var cur=start[name]+distance[name]*(a*a*a);
                            break;
                        case 'ease-out':
                            var a=1-n/count;
                            var cur=start[name]+distance[name]*(1-a*a*a);
                            break;
                    }
                    if(name == 'opacity'){
                        obj.style[name]=start[name]+n*distance[name]/count;
                    }else{
                        obj.style[name]=start[name]+n*distance[name]/count+'px';
                    }
                }
                if(n==count){
                    clearInterval(obj.timer);
                    options.complete && options.complete();
                }
            },30);
        }
    //页面加载完执行以下代码
    window.οnlοad=function(ev){
        var oDiv=document.getElementByID('target');
        //封装一个求随机数的函数;
        function rnd(n,m){
            return parseInt(Math.random()*(m-n)+n);
        }
        var oEvent=ev||event;
        var mTop=oEvent.clientHeight-oDiv.offsetHeight;//防止div身体部分跑到可视区外面,所以需要减掉物体本身的宽高;
        var mLeft=oEvent.clientWidth-oDiv.offsetWidth;
        function move(){
            motion(oDiv,{left:rnd(1,mLeft),toprnd(1,mTop)},{complete:function(){
    move();//让这个函数永远执行;
}});
        }
        move();
    }
script>

你可能感兴趣的:(原生JS运动系列)