用两种方法实现一个点绕着另一个点旋转

最新推荐文章于 2025-07-24 19:06:57 发布

转载最新推荐文章于 2025-07-24 19:06:57 发布 · 563 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhongshanblog/p/4710402.html

文章标签：

#游戏 #javascript #ViewUI

用两种方法实现一个点绕着另一个点旋转

CSS3方法

DEMO演示

@keyframes,animation, transform三样便可以搞定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #center {
            width:10px;
            height: 10px;
            border-radius: 5px;
            background: #000;
            position: relative;
            margin: 200px auto;
        }
        #dot {
            width: 10px;
            height: 10px;
            background: red;
            position: absolute;
            border-radius: 5px;
            left: 200px;
            top: 0;

            -o-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);

            -o-transform-origin: -2000%;
            -webkit-transform-origin: -2000%;
            -moz-transform-origin: -2000%;
            -ms-transform-origin: -2000%;
            transform-origin: -2000%;

            animation: rot 3s linear 0s infinite;
            -o-animation: rot 3s linear 0s infinite;
            -ms-animation: rot 3s linear 0s infinite;
            -webkit-animation: rot 3s linear 0s infinite;
            -moz-animation: rot 3s linear 0s infinite;
        }

        @keyframes rot {
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
        @-o-keyframes rot {
            from{
                -o-transform: rotate(0deg);
            }
            to{
                -o-transform: rotate(360deg);
            }
        }
        @-webkit-keyframes rot {
            from{
                -webkit-transform: rotate(0deg);
            }
            to{
                -webkit-transform: rotate(360deg);
            }
        }
        @-moz-keyframes rot {
            from{
                -moz-transform: rotate(0deg);
            }
            to{
                -moz-transform: rotate(360deg);
            }
        }
        @-ms-keyframes rot {
            from{
                -ms-transform: rotate(0deg);
            }
            to{
                -ms-transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div id="center">
        <div id="dot"></div>
    </div>
</body>
</html>

javascript

DEMO演示

Math.cos(), Math.sin(),这两个函数的参数都是弧度，所以可以用 Math.PI * 2/360 将角度转化成弧度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #center {
            width:10px;
            height: 10px;
            border-radius: 5px;
            background: #000;
            position: relative;
            margin: 200px auto;
        }
        #dot {
            width: 10px;
            height: 10px;
            background: red;
            position: absolute;
            border-radius: 5px;
            left: 200px;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="center">
        <div id="dot"></div>
    </div>

    <script type="text/javascript">
        var oDot = document.getElementById('dot');
        var deg = 0;
        var timer = null;
        var radius = oDot.offsetLeft; // 旋转半径

        timer = setInterval(function() {
            var radian = (2*Math.PI/360)*deg;
            var theTop = Math.ceil(Math.sin(radian)*radius);
            var theLeft = Math.ceil(Math.cos(radian)*radius);
            oDot.style.top = theTop + 'px';
            oDot.style.left = theLeft + 'px';
            deg += 0.5;
            if (deg === 361) {
                deg = 0;
            }
        },1);
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/zhongshanblog/p/4710402.html