zoukankan html css js c++ java

按轨迹周期运动

一、水平方向上的反复运动
例如：
水平宽度：50px
小球直径：6px

html结构：
    <div id="line" class="line">
        <div id="point" class="point" >
        </div>
    </div>
css样式：
.line{position: relative; 100px;height: 100px;border-bottom: 1px solid red;left: 100px;top: 100px;}
.point{ 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);

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>水平周期运动</title>
 5     <style type="text/css">
 6         .line{position: relative; 100px;height: 100px;border-bottom: 1px solid red;left: 100px;top: 100px;}
 7         .point{ 6px;height: 6px;background-color: Red;position: absolute;left: 47px;top: 47px;border-radius: 3px;}
 8     </style>
 9     <script type="text/javascript">
10         window.onload = function () {
11             var point = document.getElementById("point");
12             var line = document.getElementById("line");
13             var i = 0, j = 0;
14             var b = false;
15             setInterval(function () {
16                 if (i < line.offsetWidth && false == b) {
17                     i++;
18                     point.style.left = 47 - 50 + i + "px";
19                     point.style.top = 47 + 50 + "px";
20                 }
21                 if (contline.offsetWidth == i) {
22                     b = true; 
23                 }
24                 if (i > 0 && true == b) {
25                     i--;
26                     point.style.left = 47 - 50 + i + "px";
27                     point.style.top = 47 + 50 + "px";
28                 }
29                 if (0 == i) {
30                     b = false;
31                 }
32             }, 60);
33         }
34     </script>
35 </head>
36 <body>
37     <div id="line" class="line">
38         <div id="point" class="point">
39         </div>
40     </div>
41 </body>
42 </html>

二、按长方形（正方形）周长运动
长方形的长和宽分别是150px和100px
小球直径：6px

html结构：
    <div id="rectangle" class="rectangle">
        <div id="point" class="point">
        </div>
    </div>
css样式：
.rectangle{position: relative; 150px;height: 100px;border: 1px solid red;left: 100px;top: 100px;}
.point{ 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);

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>水平周期运动</title>
 5     <style type="text/css">
 6         .rectangle{position: relative; 150px;height: 100px;border: 1px solid red;left: 100px;top: 100px;}
 7         .point{ 6px;height: 6px;background-color: Red;position: absolute;left: 47px;top: 47px;border-radius: 3px;}
 8     </style>
 9     <script type="text/javascript">
10         window.onload = function () {
11             var point = document.getElementById("point");
12             var rectangle = document.getElementById("rectangle");
13             var i = 0, j = 0;
14             setInterval(function () {
15                 if (i < rectangle.offsetWidth && 0 == j) {
16                     i++;
17                     point.style.left = 47 - 50 + i + "px";
18                     point.style.top = 47 - 50 + j + "px";
19                 }
20 
21                 else if (rectangle.offsetWidth == i && j < rectangle.offsetHeight) {
22                     j++;
23                     point.style.left = 47 - 50 + i + "px";
24                     point.style.top = 47 - 50 + j + "px";
25                 }
26                 else if (i > 0 && rectangle.offsetHeight == j) {
27                     i--;
28                     point.style.left = 47 - 50 + i + "px";
29                     point.style.top = 47 - 50 + j + "px";
30                 }
31                 else {
32                     j--;
33                     point.style.left = 47 - 50 + i + "px";
34                     point.style.top = 47 - 50 + j + "px";
35                 }
36             }, 60);
37         }
38     </script>
39 </head>
40 <body>
41     <div id="rectangle" class="rectangle">
42         <div id="point" class="point">
43         </div>
44     </div>
45 </body>
46 </html>

三、按圆形周长运动 2∏R
圆形直径：100px
小球直径：6px

html结构：
    <div class="circle">
        <div id="point" class="point">
        </div>
    </div>
css样式：
.circle{position: relative; 100px;height: 100px;border: 1px solid red;left: 100px;top: 100px;border-radius: 50px;}
.point{ 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);

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>水平周期运动</title>
 5     <style type="text/css">
 6         .circle{position: relative; 100px;height: 100px;border: 1px solid red;left: 100px;top: 100px;border-radius: 50px;}
 7         .point{ 6px;height: 6px;background-color: Red;position: absolute;left: 47px;top: 47px;border-radius: 3px;}
 8     </style>
 9     <script type="text/javascript">
10         window.onload = function () {
11             var point = document.getElementById("point");
12             var i = 0;
13             setInterval(function () {
14                 if (360 == i) {
15                     i = 0;
16                     point.style.left = 47 + 50 * Math.cos(0 * 2 * Math.PI / 360) + "px";
17                     point.style.top = 47 + 50 * Math.sin(0 * 2 * Math.PI / 360) + "px";
18                 }
19                 else {
20                     i++;
21                     point.style.left = 47 + 50 * Math.cos(i * 2 * Math.PI / 360) + "px";
22                     point.style.top = 47 + 50 * Math.sin(i * 2 * Math.PI / 360) + "px";
23                 }
24             }, 60);
25         }
26     </script>
27 </head>
28 <body>
29     <div class="circle">
30         <div id="point" class="point">
31         </div>
32     </div>
33 </body>
34 </html>

四、椭圆周长运动 ∏（a+b）
椭圆长半径：100px、短半径：50px
小球直径：6px

html结构：
    <div class="oval">
        <div id="point" class="point">
        </div>
    </div>
css样式：
.oval{position: relative; 200px;height: 100px;border: 1px solid red;left: 100px;top: 100px;border-radius: 100px/50px;}
.point{ 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);

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>水平周期运动</title>
 5     <style type="text/css">
 6         .oval{position: relative; 200px;height: 100px;border: 1px solid red;left: 100px;top: 100px;border-radius: 100px/50px;}
 7         .point{ 6px;height: 6px;background-color: Red;position: absolute;left: 47px;top: 47px;border-radius: 3px;}
 8     </style>
 9     <script type="text/javascript">
10         window.onload = function () {
11             var point = document.getElementById("point");
12             var i = 0;
13             setInterval(function () {
14                 if (360 == i) {
15                     i = 0;
16                     point.style.left = 97 + 100 * Math.cos(0 * 2 * Math.PI / 360) + "px";
17                     point.style.top = 47 + 50 * Math.sin(0 * 2 * Math.PI / 360) + "px";
18                 }
19                 else {
20                     i++;
21                     point.style.left = 97 + 100 * Math.cos(i * 2 * Math.PI / 360) + "px";
22                     point.style.top = 47 + 50 * Math.sin(i * 2 * Math.PI / 360) + "px";
23                 }
24             }, 60);
25         }
26     </script>
27 </head>
28 <body>
29     <div class="oval">
30         <div id="point" class="point">
31         </div>
32     </div>
33 </body>
34 </html>

查看全文

相关阅读:
dp 简单例题poj 1260 Pearls
多校赛 Barareh on Fire
中国剩余定理的简单应用 poj 1006 Biorhythms
CF 5A. Chat Server's Outgoing Traffic
springmvc使用aop心得
 Firefox添加插件支持修改Headers
提高网站打开速度的18点要素
 用maven打包项目成war文件
 springmvc使用@ResponseBody返回json乱码解决方法
 用JS实现删除买家信息（阿里巴巴模拟笔试）

原文地址：https://www.cnblogs.com/kuikui/p/2327359.html