JavaScript的运动框架学习总结
2015-12-28 17:35
766 查看
一、目录
1. 入门案例——实现匀速运动
2. 入门案例——实现缓冲运动
3. 实现任意值的运动框架v.1
4. 改进任意值的运动框架v.2
5. 改进任意值的运动框架v.3
6. 实现链式运动框架
7. 实现完美运动框架
二、内容
1. 入门案例——实现匀速运动
①. 要求：只要简单的实现传入的对象和运动的最终目标，便能操作该对象的left属性的大小匀速的变化到目标大小。
②. 具体代码：
2. 入门案例——实现缓冲运动
①. 要求：只要简单的实现传入的对象和运动的最终目标，便能操作该对象的left属性的大小由大到小的变化到目标大小。
②. 具体代码：
3. 实现任意值的运动框架v.1
①. 要求：只要简单的实现传入的对象、要变化的属性名和运动的最终目标，便能操作该对象的传入要变花属性的值由大到小的变化到目标大小。（基于缓冲运动）
②. 具体代码：
4. 改进任意值的运动框架v.2
①. 要求：在ie低版本测试下，透明度的值因为是小数，会出现一些特殊的情况，所以对此进行改进。
②. 具体代码：
5. 改进任意值的运动框架v.3
①. 要求：在任意值的运动框架的1/2版本中，都没有实现多物体运动，也就是同时多个物体进行运动，在第三版本中加入了多物体运动的功能。
②. 具体代码：
6. 实现链式运动框架
①. 要求：让其运动可以一个接一个的运行，也就是链式运动。具体效果看测试代码
②. 具体代码：
html代码部分：
链式运动框架.js代码：
7. 实现完美运动框架
①. 要求：改进链式运动框架，链式框架没办法实现多个“属性”同时运动！比如width、height同时变化。链式运动框架是没法实现的，所以对此进行改进，也就是最终的运动框架！
②. 具体代码：
html代码部分：
完美运动框架.js代码部分：
声明：这些知识点都来自智能社的视频所得~~
1. 入门案例——实现匀速运动
2. 入门案例——实现缓冲运动
3. 实现任意值的运动框架v.1
4. 改进任意值的运动框架v.2
5. 改进任意值的运动框架v.3
6. 实现链式运动框架
7. 实现完美运动框架
二、内容
1. 入门案例——实现匀速运动
①. 要求：只要简单的实现传入的对象和运动的最终目标，便能操作该对象的left属性的大小匀速的变化到目标大小。
②. 具体代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 #div1 {
8 width: 100px;
9 height: 100px;
10 background: red;
11 margin: 10px;
12 position:absolute;
13 }
14 </style>
15 <script>
16 var timer = null; //定时器
17 var speed = 10; //运动速度
18 function uniformMotion(obj,iTarget) {
19 if (obj.offsetLeft > iTarget) { //判断当前left属性的值与最终目标的值之间的位置
20 speed = -10; //说明当前对象的位置在目标值的右边
21 } else {
22 speed = 10;
23 }
24 clearInterval(timer); //先关闭之前的定时器
25 timer = setInterval(function () { //开启定时器，并保存返回的定时器对象
26 if (obj.offsetLeft == iTarget) {
27 clearInterval(timer); //运动到目标后关闭定时器
28 } else if (Math.abs(obj.offsetLeft - iTarget) < Math.abs(speed)) {
29 obj.style.left = iTarget + 'px'; //如果当前位置与目标的位置不足10，那么就让它直接跳到目标位置上
30 clearInterval(timer); //关闭定时器
31 } else {
32 obj.style.left = obj.offsetLeft + speed + 'px'; //让当前位置向目标位置移动
33 }
34 }, 30);
35 }
36 window.onload = function () {
37 var btn = document.getElementsByTagName("input")[0];
38 var oDiv = document.getElementById("div1");
39 btn.onclick = function(){
40 uniformMotion(oDiv,300);
41 }
42 }
43 </script>
44 </head>
45 <body>
46 <input type="button" value="匀速运动"/>
47 <div id="div1"></div>
48 </body>
49 </html>2. 入门案例——实现缓冲运动
①. 要求：只要简单的实现传入的对象和运动的最终目标，便能操作该对象的left属性的大小由大到小的变化到目标大小。
②. 具体代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6
7 <style>
8 div {
9 width: 100px;
10 height: 100px;
11 position: absolute;
12 background: red;
13 margin: 10px;
14 left: 100px;
15 }
16
17 #div2{
18 width: 1px;
19 height:300px;
20 background-color: black;
21 position: absolute;
22 left:600px;
23 }
24 </style>
25 <script>
26 /*缓冲运动*/
27 var timer = null;
28 var speed = 0;
29 function UnUniformModition(obj,iTarget) {
30 clearInterval(timer);
31 timer = setInterval(function () {
32 if (parseInt(getStyle(obj, "left")) == iTarget) {
33 clearInterval(timer);
34 } else {
35 speed = (iTarget - parseInt(getStyle(obj, "left"))) / 10;
36 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
37 obj.style.left = parseInt(getStyle(obj, "left")) + speed + "px";
38 }
39 }, 30);
40 }
41 /* 用来获取样式的值 obj-对象，name-样式名*/
42 function getStyle(obj, name) {
43 if (obj.currentStyle) {
44 return obj.currentStyle[name];
45 } else {
46 return getComputedStyle(obj, false)[name];
47 }
48 }
49 window.onload = function () {
50 var btn = document.getElementsByTagName("input")[0];
51 var oDiv = document.getElementsByTagName("div")[0];
52 btn.onclick = function () {
53 UnUniformModition(oDiv,600);
54 }
55 }
56 </script>
57 </head>
58 <body>
59 <input type="button" value="缓冲运动">
60 <div></div>
61 <div id="div2"></div>
62 </body>
63 </html>3. 实现任意值的运动框架v.1
①. 要求：只要简单的实现传入的对象、要变化的属性名和运动的最终目标，便能操作该对象的传入要变花属性的值由大到小的变化到目标大小。（基于缓冲运动）
②. 具体代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>任意值运动框架version 1.0</title>
6 <style>
7 div {
8 width: 100px;
9 height: 100px;
10 background: green;
11 margin: 10px;
12 }
13 #div2 {
14 border: 1px solid black;
15 }
16 #div3{
17 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
18 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
19 opacity: 0.3;
20 }
21 </style>
22 <script>
23 /**
24 *
25 * @param obj 操作对象
26 * @param attr 属性名
27 * @param iTarget 目标值
28 */
29 var timer = null;
30 function startMove(obj, attr, iTarget) {
31 clearInterval(timer);
32 timer = setInterval(function () {
33 var cur = 0;
34 if (attr == 'opacity') { //单独处理透明度问题，因为只有透明度一定要小数
35 cur = parseFloat(getStyle(obj, attr)) * 100;//乘以100是让透明度的0~1之间的度数扩大，方便后面的使用
36 } else {
37 cur = parseInt(getStyle(obj, attr));
38 }
39 var speed = (iTarget - cur) / 6; //让速度与当前位置离ITarget的距离成正比。除数越大那么缓冲就越大
40 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
41 if (cur == iTarget) {
42 clearInterval(timer);
43 } else {
44 if (attr == 'opacity') {
45 obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
46 obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
47 } else {
48 obj.style[attr] = cur + speed + 'px';
49 }
50 }
51 }, 30);
52 }
53 /**
54 * 获取样式属性的值。代替offset。
55 * @param obj 操作对象
56 * @param name 属性名
57 * @returns {*}
58 */
59 function getStyle(obj, name) {
60 if (obj.currentStyle) {
61 return obj.currentStyle[name];
62 } else {
63 return getComputedStyle(obj, false)[name];
64 }
65 }
66
67 /**
68 * 测试：
69 * 下面的例子只能一个一个进行测试，因为在这里没有设置多对象动作，
70 * 也就是说定时器此时是共有的，如果同时使用这个定时器，会出错。
71 */
72 window.onload = function () {
73 //测试width的变化（未设置border等其他影响width的属性）
74 var oDiv1 = document.getElementById("div1");
75 oDiv1.onmouseover = function () {
76 startMove(this, "width", 500);
77 }
78 oDiv1.onmouseout = function () {
79 startMove(this, "width", 100);
80 }
81 //测试width的变化（设置了影响width值得元素）
82 /*
83 var oDiv2 = document.getElementById("div2");
84 oDiv2.onmouseover = function () {
85 startMove(this, "width", 500);
86 }
87 oDiv2.onmouseout = function () {
88 startMove(this, "width", 100);
89 }
90 */
91
92 //测试width的变化（设置了影响width值得元素）
93 /*
94 var oDiv3 = document.getElementById("div3");
95 oDiv3.onmouseover = function () {
96 startMove(this, "opacity", 100);
97 }
98 oDiv3.onmouseout = function () {
99 startMove(this, "opacity", 30);
100 }
101 */
102 }
103 </script>
104 </head>
105 <body>
106 <div id="div1"></div>
107 <div id="div2"></div>
108 <div id="div3"></div>
109 </body>
110 </html>4. 改进任意值的运动框架v.2
①. 要求：在ie低版本测试下，透明度的值因为是小数，会出现一些特殊的情况，所以对此进行改进。
②. 具体代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <!-- 2.o版本对透明度的算法进行了改进，加进了round方法 具体内容在39行-->
5 <meta charset="UTF-8">
6 <title>任意值运动框架version 2.0</title>
7 <style>
8 div {
9 width: 100px;
10 height: 100px;
11 background: green;
12 margin: 10px;
13 }
14
15 #div2 {
16 border: 1px solid black;
17 }
18 #div3{
19 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
20 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
21 opacity: 0.3;
22 }
23 </style>
24 <script>
25 /**
26 *
27 * @param obj 操作对象
28 * @param attr 属性名
29 * @param iTarget 目标值
30 */
31 var timer = null;
32 function startMove(obj, attr, iTarget) {
33 clearInterval(timer);
34 timer = setInterval(function () {
35 var cur = 0;
36 if (attr == 'opacity') { //单独处理透明度问题，因为只有透明度一定要小数
37 //因为parseFloat会得到一个带小数的值，因为计算机会有误差，所以会得到一些奇怪的数值。
38 //因此在这里使用round()方法对其值进行四舍五入，去除掉小数
39 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
40 } else {
41 cur = parseInt(getStyle(obj, attr));
42 }
43 var speed = (iTarget - cur) / 6; //让速度与当前位置离ITarget的距离成正比。除数越大那么缓冲就越大
44 //如果attr的值是0~1之间的话，下面这句代码将不可用，如果是0~100之间的话，那么就没问题
45 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
46 if (cur == iTarget) {
47 clearInterval(timer);
48 } else {
49 if (attr == 'opacity') {
50 obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
51 obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
52 } else {
53 obj.style[attr] = cur + speed + 'px';
54 }
55 }
56 }, 30);
57 }
58 /**
59 * 获取样式属性的值。代替offset。
60 * @param obj 操作对象
61 * @param name 属性名
62 * @returns {*}
63 */
64 function getStyle(obj, name) {
65 if (obj.currentStyle) {
66 return obj.currentStyle[name];
67 } else {
68 return getComputedStyle(obj, false)[name];
69 }
70 }
71
72 /**
73 * 测试：
74 * 下面的例子只能一个一个进行测试，因为在这里没有设置多对象动作，
75 * 也就是说定时器此时是共有的，如果同时使用这个定时器，会出错。
76 */
77 window.onload = function () {
78 //测试width的变化（未设置border等其他影响width的属性）
79 var oDiv1 = document.getElementById("div1");
80 oDiv1.onmouseover = function () {
81 startMove(this, "width", 500);
82 }
83 oDiv1.onmouseout = function () {
84 startMove(this, "width", 100);
85 }
86 //测试width的变化（设置了影响width值得元素）
87 /*
88 var oDiv2 = document.getElementById("div2");
89 oDiv2.onmouseover = function () {
90 startMove(this, "width", 500);
91 }
92 oDiv2.onmouseout = function () {
93 startMove(this, "width", 100);
94 }
95 */
96
97 //测试width的变化（设置了影响width值得元素）
98 /*
99 var oDiv3 = document.getElementById("div3");
100 oDiv3.onmouseover = function () {
101 startMove(this, "opacity", 100);
102 }
103 oDiv3.onmouseout = function () {
104 startMove(this, "opacity", 30);
105 }
106 */
107 }
108 </script>
109 </head>
110 <body>
111 <div id="div1"></div>
112 <div id="div2"></div>
113 <div id="div3"></div>
114 </body>
115 </html>5. 改进任意值的运动框架v.3
①. 要求：在任意值的运动框架的1/2版本中，都没有实现多物体运动，也就是同时多个物体进行运动，在第三版本中加入了多物体运动的功能。
②. 具体代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <!-- 3.o版本 支持多物体运动 下面的三个例子可以同时测试-->
5 <meta charset="UTF-8">
6 <title>任意值运动框架version 2.0</title>
7 <style>
8 div {
9 width: 100px;
10 height: 100px;
11 background: green;
12 margin: 10px;
13 }
14
15 #div2 {
16 border: 1px solid black;
17 }
18 #div3{
19 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
20 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
21 opacity: 0.3;
22 }
23 </style>
24 <script>
25
26
27 /**
28 *
29 * @param obj 操作对象
30 * @param attr 属性名
31 * @param iTarget 目标值
32 */
33 function startMove(obj, attr, iTarget) {
34 clearInterval(obj.timer);
35 obj.timer = setInterval(function () {
36 var cur = 0;
37 if (attr == 'opacity') { //单独处理透明度问题，因为只有透明度一定要小数
38 //因为parseFloat会得到一个带小数的值，因为计算机会有误差，所以会得到一些奇怪的数值。
39 //因此在这里使用round()方法对其值进行四舍五入，去除掉小数
40 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
41 } else {
42 cur = parseInt(getStyle(obj, attr));
43 }
44 var speed = (iTarget - cur) / 6; //让速度与当前位置离ITarget的距离成正比。除数越大那么缓冲就越大
45 //如果attr的值是0~1之间的话，下面这句代码将不可用，如果是0~100之间的话，那么就没问题
46 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
47 if (cur == iTarget) {
48 clearInterval(obj.timer);
49 } else {
50 if (attr == 'opacity') {
51 obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
52 obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
53 } else {
54 obj.style[attr] = cur + speed + 'px';
55 }
56 }
57 }, 30);
58 }
59
60
61 /**
62 * 获取样式属性的值。代替offset。
63 * @param obj 操作对象
64 * @param name 属性名
65 * @returns {*}
66 */
67 function getStyle(obj, name) {
68 if (obj.currentStyle) {
69 return obj.currentStyle[name];
70 } else {
71 return getComputedStyle(obj, false)[name];
72 }
73 }
74
75 /**
76 * 测试：
77 * 下面的例子只能一个一个进行测试，因为在这里没有设置多对象动作，
78 * 也就是说定时器此时是共有的，如果同时使用这个定时器，会出错。
79 */
80 window.onload = function () {
81 //测试width的变化（未设置border等其他影响width的属性）
82 var oDiv1 = document.getElementById("div1");
83 oDiv1.timer = null;
84 oDiv1.onmouseover = function () {
85 startMove(this, "width", 500);
86 }
87 oDiv1.onmouseout = function () {
88 startMove(this, "width", 100);
89 }
90 //测试width的变化（设置了影响width值得元素）
91 var oDiv2 = document.getElementById("div2");
92 oDiv2.timer = null;
93 oDiv2.onmouseover = function () {
94 startMove(this, "width", 500);
95 }
96 oDiv2.onmouseout = function () {
97 startMove(this, "width", 100);
98 }
99
100 //测试opacity的变化
101 var oDiv3 = document.getElementById("div3");
102 oDiv3.timer = null;
103 oDiv3.onmouseover = function () {
104 startMove(this, "opacity", 100);
105 }
106 oDiv3.onmouseout = function () {
107 startMove(this, "opacity", 30);
108 }
109 }
110 </script>
111 </head>
112 <body>
113 <div id="div1"></div>
114 <div id="div2"></div>
115 <div id="div3"></div>
116 </body>
117 </html>6. 实现链式运动框架
①. 要求：让其运动可以一个接一个的运行，也就是链式运动。具体效果看测试代码
②. 具体代码：
html代码部分：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 #div1{
8 width:100px;
9 height:100px;
10 background: green;
11 }
12
13 </style>
14
15 <script src="链式运动框架.js"></script>
16 <script>
17 window.onload=function(){
18 var oBtn = document.getElementsByTagName('input')[0];
19 var oDiv = document.getElementById('div1');
20 oBtn.onclick = function(){
21 startMove(oDiv,'width',500,function(){
22 startMove(oDiv,'height',500);
23 });
24 }
25 }
26 </script>
27 </head>
28 <body>
29 <input type="button" value="运动">
30
31 <div id="div1"></div>
32 </body>
33 </html>链式运动框架.js代码：
1 /**
2 * 获取计算后的样式
3 * @param obj 对象
4 * @param name 样式名称：width/height等
5 * @returns {*}
6 */
7 function getStyle(obj, name) {
8 if (obj.currentStyle) {
9 return obj.currentStyle[name];
10 } else {
11 return getComputedStyle(obj, false)[name];
12 }
13 }
14
15 function startMove(obj, attr, iTarget, fun) {
16 clearInterval(obj.timer);
17 obj.timer = setInterval(function () {
18 var cur;
19 if (attr == 'opacity') {
20 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
21 } else {
22 cur = parseInt(getStyle(obj, attr));
23 }
24 var speed = (iTarget - cur) / 6;
25 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
26 if (cur == iTarget) {
27 clearInterval(obj.timer);
28 if (fun) {
29 fun();
30 }
31 } else {
32 if (attr == 'opacity') {
33 obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
34 obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
35 } else {
36 obj.style[attr] = cur + speed + 'px';
37 }
38 }
39 }, 30);
40 }7. 实现完美运动框架
①. 要求：改进链式运动框架，链式框架没办法实现多个“属性”同时运动！比如width、height同时变化。链式运动框架是没法实现的，所以对此进行改进，也就是最终的运动框架！
②. 具体代码：
html代码部分：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 #div1{
8 width:100px;
9 height:100px;
10 background: black;
11 }
12 </style>
13 <script src="完美运动框架.js"></script>
14 <script>
15 window.onload = function(){
16 var oBtn = document.getElementById('btn1');
17 var oDiv = document.getElementById('div1');
18 oBtn.onclick = function(){
19 startMove(oDiv,{width:500,height:500},function(){
20 startMove(oDiv,{width:100,height:100});
21 });
22 }
23 }
24
25 </script>
26 </head>
27 <body>
28 <input id="btn1" type="button" value="运动">
29 <div id="div1"></div>
30 </body>
31 </html>完美运动框架.js代码部分：
1 /**
2 * 获取对象的样式
3 * @param obj 对象
4 * @param name 样式名称
5 */
6 function getStyle(obj, name) {
7 if (obj.currentStyle) {
8 return obj.currentStyle[name];
9 } else {
10 return getComputedStyle(obj, false)[name];
11 }
12 }
13 /**
14 * 完美运动框架实现了链式运动框架无法实现多属性同时运动的情况。如：width/height同时运动
15 * @param obj
16 * @param json 把要运动的属性通过json方式传入。如：{width:500,height:500}
17 * @param fun 执行完动作后，需要调用的方法
18 */
19 function startMove(obj, json, fun) {
20 clearTimeout(obj.timer);
21 obj.timer = setInterval(function () {
22 var stop = true; //用来判断是否可以关闭定时器
23 for (var item in json) {
24 var cur;
25 if (item == 'opacity') {
26 cur = Math.round(parseFloat(getStyle(obj, item)) * 100);
27 } else {
28 cur = parseInt(getStyle(obj, item));
29 }
30 var speed = (json[item] - cur) / 6;
31 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
32 if (cur != json[item]) { //判断当前对象的值是否已经达到目标值
33 stop = false; //未达到目标值时，让stop为false。
34 }
35 if (item == 'opacity') {
36 obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
37 obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
38 } else {
39 obj.style[item] = cur + speed + 'px';
40 }
41 if(stop){
42 clearInterval(obj.timer);
43 if(fun){fun();}
44 }
45 }
46 }, 30);
47 }声明：这些知识点都来自智能社的视频所得~~
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS截取URL后面的参数，并格式化HTML编码
- 原生js Ajax
- JavaScript 学习—— js获取行间样式和非行间样式
- 购物车源码
- js打印指定局部页面
- 一种新的javascript对象创建方式Object.create()
- xStream完美转换XML、JSON
- Javascript中eval解析的json的几种用法
- JSON.parse()和JSON.stringify()&&traditional(ajax请求)的作用
- javascript面向对象
- js delete 用法(删除对象属性及变量)
- 关于 Touchjs 手势识别事件库 this 关键字与选择器不对称情况
- 处理json中影响解析的多余引號
- javascript的克隆--深拷贝
- 使用JSONlib简单的转换json操作
- 【JavaScript 从零开始】 数字 文本 包装对象
- js异步编程技巧一
- Javascript：谈谈JS的全局变量跟局部变量
- js判断复选框的数量
- JSON简介及常用操作