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>
  • 相关阅读:
    Trie树-字典树
    【实用向】一些简单实现
    C++ 基础部分
    【动态规划】背包问题-例题分析
    C语言-回溯例4
    C语言-回溯例3
    C语言-回溯例2
    C语言-回溯例1
    java开始到熟悉105-107
    C语言-二维背包问题
  • 原文地址:https://www.cnblogs.com/attesa/p/1769056.html
Copyright © 2011-2022 走看看