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>

查看全文

相关阅读:
Chandy-Lamport_algorithm
3 differences between Savepoints and Checkpoints in Apache Flink
列数行数表数限制
 数据收集、传输、元数据管理、作业流调度、海量数据查询引擎、数据可视化
 分析云负载均衡产品
 端口被占用通过域名的处理把www.domain.com均衡到本机不同的端口反向代理隐藏端口 Nginx做非80端口转发搭建nginx反向代理用做内网域名转发 location 规则
 JSON Web Token
查看开启端口的应用
 If the parts of an organization (e.g., teams, departments, or subdivisions) do not closely reflect the essential parts of the product, or if the relationship between organizations do not reflect the r
微服务架构的理论基础

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