一、水平方向上的反复运动

例如：

水平宽度：50px

小球直径：6px

html结构：

    <div id="line" class="line">

        <div id="point" class="point" >

        </div>

    </div>

css样式：

.line{position: relative;width: 100px;height: 100px;border-bottom: 1px solid red;left: 100px;top: 100px;}

.point{width: 6px;height: 6px;background-color: Red;position: absolute;left: 47px;top: 47px;border-radius: 3px;}

js代码：

            var point = document.getElementById("point");

            var line = document.getElementById("line");

            var i = 0, j = 0;

            var b = false;

            setInterval(function () {

                if (i < line.offsetWidth && false == b) {

                    i++;

                    point.style.left = 47 - 50 + i + "px";

                    point.style.top = 47 + 50 + "px";

                }

                if (contline.offsetWidth == i) { b = true; }

                if (i > 0 && true == b) {

                    i--;

                    point.style.left = 47 - 50 + i + "px";

                    point.style.top = 47 + 50 + "px";

                }

                if (0 == i) {

                    b = false;

                }

            }, 60);

1   2   3   4       5       9      35  36  37     
      
        38         
       
         39         
       
 40     
      
 41  42 

二、按长方形（正方形）周长运动

长方形的长和宽分别是150px和100px

小球直径：6px

html结构：

    <div id="rectangle" class="rectangle">

        <div id="point" class="point">

        </div>

    </div>

css样式：

.rectangle{position: relative;width: 150px;height: 100px;border: 1px solid red;left: 100px;top: 100px;}

.point{width: 6px;height: 6px;background-color: Red;position: absolute;left: 47px;top: 47px;border-radius: 3px;}

js代码：

var point = document.getElementById("point");

            var rectangle = document.getElementById("rectangle");

            var i = 0, j = 0;

            setInterval(function () {

                if (i < rectangle.offsetWidth && 0 == j) {

                    i++;

                    point.style.left = 47 - 50 + i + "px";

                    point.style.top = 47 - 50 + j + "px";

                }

                else if (rectangle.offsetWidth == i && j < rectangle.offsetHeight) {

                    j++;

                    point.style.left = 47 - 50 + i + "px";

                    point.style.top = 47 - 50 + j + "px";

                }

                else if (i > 0 && rectangle.offsetHeight == j) {

                    i--;

                    point.style.left = 47 - 50 + i + "px";

                    point.style.top = 47 - 50 + j + "px";

                }

                else {

                    j--;

                    point.style.left = 47 - 50 + i + "px";

                    point.style.top = 47 - 50 + j + "px";

                }

            }, 60);

1   2   3   4       5       9      39  40  41     
      
        42         
       
         43         
       
 44     
      
 45  46 

三、按圆形周长运动 2∏R

圆形直径：100px

小球直径：6px

html结构：

    <div class="circle">

        <div id="point" class="point">

        </div>

    </div>

css样式：

.circle{position: relative;width: 100px;height: 100px;border: 1px solid red;left: 100px;top: 100px;border-radius: 50px;}

.point{width: 6px;height: 6px;background-color: Red;position: absolute;left: 47px;top: 47px;border-radius: 3px;}

js代码：

var point = document.getElementById("point");

            var i = 0;

            setInterval(function () {

                if (360 == i) {

                    i = 0;

                    point.style.left = 47 + 50 * Math.cos(0 * 2 * Math.PI / 360) + "px";

                    point.style.top = 47 + 50 * Math.sin(0 * 2 * Math.PI / 360) + "px";

                }

                else {

                    i++;

                    point.style.left = 47 + 50 * Math.cos(i * 2 * Math.PI / 360) + "px";

                    point.style.top = 47 + 50 * Math.sin(i * 2 * Math.PI / 360) + "px";

                }

            }, 60);

1   2   3   4       5       9      27  28  29     
      
        30         
       
         31         
       
 32     
      
 33  34 

四、椭圆周长运动 ∏（a+b）

椭圆长半径：100px、短半径：50px

小球直径：6px

html结构：

    <div class="oval">

        <div id="point" class="point">

        </div>

    </div>

css样式：

.oval{position: relative;width: 200px;height: 100px;border: 1px solid red;left: 100px;top: 100px;border-radius: 100px/50px;}

.point{width: 6px;height: 6px;background-color: Red;position: absolute;left: 47px;top: 47px;border-radius: 3px;}

js代码：

            var point = document.getElementById("point");

            var i = 0;

            setInterval(function () {

                if (360 == i) {

                    i = 0;

                    point.style.left = 97 + 100 * Math.cos(0 * 2 * Math.PI / 360) + "px";

                    point.style.top = 47 + 50 * Math.sin(0 * 2 * Math.PI / 360) + "px";

                }

                else {

                    i++;

                    point.style.left = 97 + 100 * Math.cos(i * 2 * Math.PI / 360) + "px";

                    point.style.top = 47 + 50 * Math.sin(i * 2 * Math.PI / 360) + "px";

                }

            }, 60);

1   2   3   4       5       9      27  28  29     
      
        30         
       
         31         
       
 32     
      
 33  34