zoukankan      html  css  js  c++  java
  • 物体旋转效果

    物体旋转效果实现步骤:

    1、获得物体的圆心的坐标(Ox,Oy)

    2、设定每次走的角度 J = 0.01

    3、初始角度值 a = 0

    4、执行动画函数 setInterval(move,70)

    5、每走固定J个角度 获得旋转物体将要到达坐标点

    代码如下:

    代码

    <style type="text/css">
    #a{ position:absolute; top:300px; left:400px; 20px; height:20px; background:#
    000; border:1px #F00 solid;}
    #b{ position:absolute; 50px; height:50px; background:#
    060; border:1px #000 solid; left:385px; top:100px;}
    </style>

    <body>
    <div>
    <div id="a"></div>
    <div id="b"></div>
    </div>
    <script type="text/javascript">
    var wai =document.getElementById('b'); //转的物体
    var xin= document.getElementById('a'); //圆心
    var Ox=0,Oy=0,R=200,Bx,By,J = 0.1,a = 0;

    Ox
    = xin.offsetLeft + 10;//圆心的坐标
    Oy = xin.offsetTop + 10;
    clearInterval(interval);
    var interval = setInterval(move, 100);

    function move()
    {
    a
    = a + J;
    var Ex =Ox+ parseInt(Math.cos(a)*R);
    var Ey =Oy+ parseInt(Math.sin(a)*R);
    wai.style.left
    = Ex;
    wai.style.top
    = Ey;
    if(a>=360)
    {a
    = 0;
    //clearInterval(interval);
    }
    }
    </script>
    </body>
  • 相关阅读:
    重构该何时登场
    重构
    中国剩余定理
    连分数的应用
    连分数的性质
    有限连分数与欧几里德除法的联系
    连分数
    费马大定理
    P4178 Tree 点分治
    LOJ 6029. 「雅礼集训 2017 Day1」市场
  • 原文地址:https://www.cnblogs.com/attesa/p/1769056.html
Copyright © 2011-2022 走看看