您的位置：首页 > Web前端 > CSS

转圈圈动画animation

2016-01-21 22:20 405 查看

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

<meta charset="utf-8" />

    <style>

        *{

            margin:0;

            padding:0;

        }



        #circle{

            background-color:coral;

            height:100px;

            width:100px;

            position:relative;





        }

    </style>

    <script>

        window.onload = function () {

            for (var i = 0; i < 20; i++) {

                var Odiv = document.getElementById('circle');

                // Odiv.onmouseover = function () {

                StartMove(window.screen.availWidth - 100, 'offsetLeft', 'left', function () {

                    StartMove(window.screen.availHeight - 170, 'offsetTop', 'top', function () {

                        StartMove(0, 'offsetLeft', 'left', function () {

                            StartMove(0, 'offsetTop', 'top')

                        })

                    })

                });

            }

        }

            // }

            var timer = null;

            function StartMove(itarget, key, direction, fn) {

                clearInterval(timer);

                var Odiv = document.getElementById('circle');

                timer = setInterval(function () {

                    var speed = (itarget - Odiv[key]) / 5;

                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    if (Odiv[key] == itarget) {

                        clearInterval(timer);

                        if (fn) {

                            fn();

                        }

                    }

                    else {

                        Odiv.style[direction] = Odiv[key] + speed + 'px';

                    }

                }, 30)

            }



    </script>

</head>

<body>

    <div id="circle"></div>



</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html javascript js 动画

相关文章推荐

新的分享

章节导航