JavaScript基础 client offset scrol

2018-02-22  本文已影响0人  0说

onresize浏览器窗口大小改变大小时触发
一个球运动


Animation.gif
<style type="text/css">
    /*清除样式*/
    *{margin: 0;padding: 0;}
    ul li{list-style-type: none;}
    a{text-decoration: none; color: inherit;}
    /*---------------------------------------------------*/

    #radius{
        position: relative;
        width: 60px;
        height: 60px;
        background: red;
        border-radius: 50%;
    }
</style>
</head>
<body>
    <div id="radius"></div>
    <script type="text/javascript">
        var oDiv = document.getElementById( 'radius' ),
            space = 5, //
            space2 = 5,
            Top = 0,
            Left = 0,
            winTop = document.documentElement.clientHeight,
            winLeft = document.documentElement.clientWidth,
            
            
            maxTop,maxLeft,
            R = oDiv.offsetHeight, //获取div的直径
            maxTop = winTop-R,
            maxLeft = winLeft-R;
            window.onresize = function (){ //onresize 监听窗口有没有变化
                winTop = document.documentElement.clientHeight; //获取可视内容的高度
                winLeft = document.documentElement.clientWidth; //获取可视内容的宽度
                maxTop = winTop-R,
                maxLeft = winLeft-R;
            }
            

        !function move(){
            Top += space; //原来加上速度
            Left += space2; //原来加上速度

            console.time(1);
            if( Top > maxTop || Top < 0 ){ 
    /*
    如果Top加到  > maxTop  那么Top>maxTop 就为真 
    假如      500             500     450   min就取450  
              500               500     450   max就取450



    如果Top减到 <0   那么 Top < 0 变为真;
    假如        -2               -2     450   min就取-2
                -2               -2      0    max就取0
    */
                Top = Math.min( Top , maxTop ); 
                Top = Math.max( Top , 0);
                space = -space;
                oDiv.style.backgroundColor = changeColor();
            }
            /*
            if( Top > maxTop ){
                Top = maxTop;
                num = -num;
                oDiv.style.backgroundColor = changeColor();
            } 
            if( Top < 0 ){
                Top = 0 ;
                num = -num;
                oDiv.style.backgroundColor = changeColor();
            }
            */
            if( Left > maxLeft || Left < 0 ){
                Left = Math.min( Left , maxLeft );
                Left = Math.max( Left , 0);
                space2 = -space2;
                oDiv.style.backgroundColor = changeColor();
            }
            /*
            if( Left > maxLeft ){
                Left = maxLeft;
                num2 = -num2;
                oDiv.style.backgroundColor = changeColor();
            }
            if( Left < 0 ){
                Left = 0 ;
                num2 = -num2;
                oDiv.style.backgroundColor = changeColor();
            }
            */
            oDiv.style.top = Top +'px';
            oDiv.style.left = Left+'px';    
            requestAnimationFrame(move);
        }();

        // 随机颜色
        function changeColor(){
            var r = Math.floor( Math.random()*256),
                g = Math.floor( Math.random()*256),
                b = Math.floor( Math.random()*256);
            return 'rgb('+r+','+g+','+b+')';
        }
    </script>
</body>

多个球运动


Animation.gif
<style type="text/css">
    /*清除样式*/
    *{margin: 0;padding: 0;}
    ul li{list-style-type: none;}
    a{text-decoration: none; color: inherit;}
    /*---------------------------------------------------*/
    .box{
        position: absolute;
        top: 0;
        left: 0;
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
</style>
</head>
<body>
    <script>
        !function (){
            
            // 创建盒子
            createBox(20);
            function createBox(n){
                for (var i = 0; i < n; i++) {
                    var box = document.createElement( 'div' );
                        box.className = 'box';
                        box.style.background = '-webkit-radial-gradient(center , #fff,'+changeColor()+')';
                        box.speed = 1+Math.floor(Math.random()*10); //定义一个speed(速度)自定义属性 定义随机速度
                        box.speed2 = 1+Math.floor(Math.random()*10);
                        box.Top = 0;    //定义一个top(位置初始值)自定义属性 定义随机速度
                        box.Left = 0;
                        document.body.appendChild( box );
                        console.log( Math.floor(Math.random()*100) );
                }
            }

            // 获取window宽高 和 初始值
            var oBox = document.getElementsByTagName( 'div' ),
                winWidth = document.documentElement.clientWidth,
                winHeight = document.documentElement.clientHeight,
                R = oBox[0].offsetWidth,

                maxTop = winHeight - R,
                maxLeft = winWidth - R;
            //监听窗口变化函数
            window.onresize = function (){
                winWidth = document.documentElement.clientWidth;
                winHeight = document.documentElement.clientHeight;
                maxTop = winHeight - R;
                maxLeft = winWidth - R;
            }

            //球运动函数

            !function autoPlay(){
                var length = oBox.length;
                    
                for (var i = 0; i < length; i++) {
                    var ball = oBox[i]; //把取到的oBox[i]存起来
                    ball.Top += ball.speed; //每个盒子的速度
                    ball.Left += ball.speed2;

                    if( ball.Top > maxTop || ball.Top < 0 ){
                        ball.Top = Math.max( ball.Top , 0 );
                        ball.Top = Math.min( ball.Top , maxTop );
                        ball.speed = -ball.speed;
                        ball.style.background = '-webkit-radial-gradient(center , #fff,'+changeColor()+')';
                    }

                    if( ball.Left > maxLeft || ball.Left < 0 ){
                        ball.Left = Math.max( ball.Left , 0 );
                        ball.Left = Math.min( ball.Left , maxLeft );
                        ball.speed2 = -ball.speed2;
                        ball.style.background = '-webkit-radial-gradient(center , #fff,'+changeColor()+')';
                    }

                    ball.style.top =  ball.Top + 'px';
                    ball.style.left =  ball.Left + 'px';

                }
                // setAnimation( autoPlay , 1000/60);
                setAnimation( autoPlay);
            }();

            // 随机颜色
            function changeColor(){
                var r = Math.floor( Math.random()*256),
                    g = Math.floor( Math.random()*256),
                    b = Math.floor( Math.random()*256);
                return 'rgb('+r+','+g+','+b+')';
            }

            // 动画兼容
            function setAnimation( fn ){
                return window.requestAnimationFrame ? requestAnimationFrame( fn ):setTimeout( fn , 1000/60 )
            }
        }()
    </script>
</body>
上一篇 下一篇

猜你喜欢

热点阅读