前面的话

　　上一篇介绍了变速运动，但只实现了直线运动。如果元素的left和top同时运动，并遵循不同的曲线公式，则会进行不同形式的曲线运动。本文将详细介绍圆周运动、钟摆运动、抛物线运动和流体运动这四种曲线运动形式

圆周运动

　　圆周运动可能是最好理解的曲线运动了

　　若(x0,y0)为圆心，则圆的公式为(x-x0)*(x-x0) + (y-y0)*(y-y0) = r*r

　　写成三角函数的形式为

  1.     x = x0 + cosa*r
  2.     y = y0 + sina*r

　　所以，实际上只要知道夹角a和圆心(x0,y0)就可以计算出x和y

　　圆周运动可以封装为函数circleMove.js

  1. function getCSS(obj,style){
  2.     if(window.getComputedStyle){
  3.         return getComputedStyle(obj)[style];
  4.     }
  5.     return obj.currentStyle[style];
  6. }
  7. function circleMove(json){
  8.     //要操作的元素
  9.     var obj = json.obj;
  10.     //方向(顺时针'+'或逆时针'-')
  11.     var dir = json.dir;
  12.     dir = dir || '+';
  13.     //最大圈数
  14.     var max = json.max;
  15.     max = Number(max) || 'all';
  16.     //半径
  17.     var r = json.r;
  18.     r = Number(r) || 100;
  19.     //圆心x轴坐标
  20.     var x0 = json.x0 || parseFloat(getCSS(obj,'left'));
  21.     //圆心y轴坐标
  22.     var y0 = json.y0 ||  parseFloat(getCSS(obj,'top')) - r;
  23.     //初始夹角，以角度为单位
  24.     var a0 = json.a0;
  25.     a0 = Number(a) || 90;
  26.     //当前夹角
  27.     var a = json.a ||a0;
  28.     //当前圈数
  29.     var num = json.num || 0;
  30.     //清除定时器
  31.     if(obj.timer){return;}
  32.     //声明当前值cur
  33.     var cur = {};
  34.     obj.timer = setInterval(function(){
  35.         //将这些瞬时值储存在obj对象中的属性中
  36.         obj.a = a;
  37.         obj.x0 = x0;
  38.         obj.y0 = y0;
  39.         obj.x = x;
  40.         obj.y = y;
  41.         obj.num = num;
  42.         //如果元素运动到指定圈数则停止定时器
  43.         if(num == max){
  44.             clearInterval(obj.timer);
  45.         }
  46.         //顺时针
  47.         if(dir == '+'){
  48.             a++;
  49.             if(a == a0 + 360){
  50.                 a = a0;
  51.                 num++;
  52.             }
  53.         //逆时针
  54.         }else{
  55.             a--;
  56.             if(a == a0 - 360){
  57.                 a = a0;
  58.                 num++;
  59.             }
  60.         }
  61.         //更新当前值
  62.         cur.left = parseFloat(getCSS(obj,'left'));
  63.         cur.top = parseFloat(getCSS(obj,'top'));
  64.         //更新left和top值
  65.         var x = x0 + r*Math.cos(a*Math.PI/180);
  66.         var y = y0 + r*Math.sin(a*Math.PI/180)
  67.         test.style.left = x + 'px';
  68.         test.style.top = y + 'px';
  69.     },20);
  70. }

　　下面利用封装的circleMove.js来实现简单的圆周运动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8. <button id="btn1">顺时针旋转</button>
  9. <button id="btn2">逆时针旋转</button>
  10. <button id="btn3">暂停</button>
  11. <button id="reset">还原</button>
  12. <div id="result"></div>
  13. <div id="backup" style="height: 298px;width:298px;border:1px solid black;border-radius:50%;position:absolute;top:50px;left:50px;">
  14.     <div id="test" style="height: 40px;width: 40px;background-color:pink;position:relative;left:130px;top:280px;border-radius:50%"></div>
  15. </div>
  16. <script src="http://files.cnblogs.com/files/xiaohuochai/circleMove.js"></script>
  17. <script>
  18. reset.onclick = function(){
  19.     history.go();
  20. }
  21. btn1.onclick = function(){
  22.     circleMove({obj:test,r:150,x0:test.x0,y0:test.y0,a:test.a,num:test.num});
  23. }
  24. btn2.onclick = function(){
  25.     circleMove({obj:test,r:150,dir:'-',x0:test.x0,y0:test.y0,a:test.a,num:test.num});
  26. }
  27. btn3.onclick = function(){
  28.     clearInterval(test.timer);
  29.     test.timer = 0;
  30. }
  31. </script>
  32. </body>
  33. </html>

【css3】

　　css3新增了transform和animation等新的样式，也可以用来做圆周运动。transform里面有一个变形函数是rotate，这时就需要使用逆向思维。元素本身并不发生运动，而是轨道自身在旋转，会实现视觉上的圆周运动效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7. @keyframes rotate1{
  8.     100%{transform:rotate(360deg);}
  9. }
  10. @keyframes rotate2{
  11.     100%{transform:rotate(-360deg);}
  12. }
  13. #backup{
  14.     height: 298px;width:298px;border:1px solid black;border-radius:50%;position:absolute;top:50px;left:50px;
  15. }
  16. #test{
  17.     height: 40px;width: 40px;background-color:pink;position:relative;left:130px;top:280px;border-radius:50%
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <button id="btn1">顺时针旋转</button>
  23. <button id="btn2">逆时针旋转</button>
  24. <button id="btn3">暂停</button>
  25. <button id="reset">还原</button>
  26. <div id="result"></div>
  27. <div id="backup">
  28.     <div id="test"></div>
  29. </div>
  30. <script>
  31. reset.onclick = function(){
  32.     history.go();
  33. }
  34. btn1.onclick = function(){
  35.     backup.style.animation= 'rotate1 4s infinite linear';
  36. }
  37. btn2.onclick = function(){
  38.     backup.style.animation= 'rotate2 4s infinite linear';
  39. }
  40. btn3.onclick = function(){
  41.     backup.style.animationPlayState = 'paused';
  42. }
  43. </script>
  44. </body>
  45. </html>

三维圆周

　　前面我们介绍了二维圆周运动，如果是三维圆周运动，则需要考虑x、y、z立体坐标轴

　　从示意图中可知，三维圆周运动的模拟实现实际上是元素的宽高发生了变化，元素的x轴变化依然按照三角函数公式进行，元素的y轴一直保存为0

　　假设圆的宽(或高)在z轴正方向最远处时为100px，当z轴值为0时，宽(或高)为50px，在z轴负方向最远处时为0px

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8. <button id="btn1">开始旋转</button>
  9. <button id="btn2">暂停</button>
  10. <button id="reset">还原</button>
  11. <div id="result"></div>
  12. <div id="test" style="height: 100px;width: 100px;background-color:pink;position:relative;left:200px;top:60px;border-radius:50%"></div>
  13. <script>
  14. reset.onclick = function(){
  15.     history.go();
  16. }
  17. btn1.onclick = function(){
  18.     threeCircleMove({
  19.         obj:test,r:200,x0:test.x0,width:test.width,height:test.height,a:test.a,num:test.num
  20.     })
  21. }
  22. btn2.onclick = function(){
  23.     clearInterval(test.timer);
  24.     test.timer = 0;
  25. }
  26. function getCSS(obj,style){
  27.     if(window.getComputedStyle){
  28.         return getComputedStyle(obj)[style];
  29.     }
  30.     return obj.currentStyle[style];
  31. }
  32. function threeCircleMove(json){
  33.     //要操作的元素
  34.     var obj = json.obj;
  35.     //方向(顺时针'+'或逆时针'-')
  36.     var dir = json.dir;
  37.     dir = dir || '+';
  38.     //最大圈数
  39.     var max = json.max;
  40.     max = Number(max) || 'all';
  41.     //半径
  42.     var r = json.r;
  43.     r = Number(r) || 100;
  44.     //圆心x轴坐标
  45.     var x0 = json.x0 || parseFloat(getCSS(obj,'left'));
  46.     //元素的初始宽高
  47.     var offsetHeight = obj.offsetHeight;
  48.     var offsetWidth = obj.offsetWidth;
  49.     //元素的宽高
  50.     var height,width;
  51.     //初始夹角，以角度为单位
  52.     var a0 = json.a0;
  53.     a0 = Number(a) || 90;
  54.     //当前夹角
  55.     var a = json.a ||a0;
  56.     //当前圈数
  57.     var num = json.num || 0;
  58.     //清除定时器
  59.     if(obj.timer){return;}
  60.     //声明当前值cur
  61.     var cur = {};
  62.     obj.timer = setInterval(function(){
  63.         //将这些瞬时值储存在obj对象中的属性中
  64.         obj.a = a;
  65.         obj.x0 = x0;
  66.         obj.width = width;
  67.         obj.height = height;
  68.         obj.x = x;
  69.         obj.num = num;
  70.         //如果元素运动到指定圈数则停止定时器
  71.         if(num == max){
  72.             clearInterval(obj.timer);
  73.         }
  74.         //顺时针
  75.         if(dir == '+'){
  76.             a++;
  77.             if(a == a0 + 360){
  78.                 a = a0;
  79.                 num++;
  80.             }
  81.         //逆时针
  82.         }else{
  83.             a--;
  84.             if(a == a0 - 360){
  85.                 a = a0;
  86.                 num++;
  87.             }
  88.         }
  89.         //更新当前值
  90.         cur.left = parseFloat(getCSS(obj,'left'));
  91.         //更新left值和宽高值
  92.         var x = x0 + r*Math.cos((90 + a*Math.PI)/180);
  93.         width = (offsetWidth/2) + offsetWidth/2*Math.sin((90 + a*Math.PI)/180);
  94.         height = (offsetHeight/2) + offsetWidth/2*Math.sin((90 + a*Math.PI)/180);
  95.         test.style.left = x + 'px';
  96.         test.style.width = width + 'px';
  97.         test.style.height = height + 'px';
  98.     },20);
  99. }
  100. </script>
  101. </body>
  102. </html>

【css3】

　　同样地，使用强大的css3属性可以实现三维圆周效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7. @keyframes rotate1{
  8.     100%{transform:rotateX(60deg) rotate(360deg);}
  9. }
  10. @keyframes rotate2{
  11.     100%{transform:rotateX(60deg) rotate(-360deg);}
  12. }
  13. body{
  14.     perspective: 700px;
  15. }
  16. #backup{
  17.     height: 298px;width:298px;border:1px solid black;border-radius:50%;position:absolute;top:100px;left:100px;transform:rotateX(60deg) rotate(0);
  18. }
  19. #test{
  20.     height: 40px;width: 40px;background-color:pink;position:relative;left:130px;top:280px;border-radius:50%
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <button id="btn1">顺时针旋转</button>
  26. <button id="btn2">逆时针旋转</button>
  27. <button id="btn3">暂停</button>
  28. <button id="reset">还原</button>
  29. <div id="result"></div>
  30. <div id="backup">
  31.     <div id="test"></div>
  32. </div>
  33. <script>
  34. reset.onclick = function(){
  35.     history.go();
  36. }
  37. btn1.onclick = function(){
  38.     backup.style.animation= 'rotate1 4s infinite linear';
  39. }
  40. btn2.onclick = function(){
  41.     backup.style.animation= 'rotate2 4s infinite linear';
  42. }
  43. btn3.onclick = function(){
  44.     backup.style.animationPlayState = 'paused';
  45. }
  46. </script>
  47. </body>
  48. </html>

钟摆运动

　　一个钟摆，一会儿朝左，一会儿朝右，周而复始，来回摆动。钟摆总是围绕着一个中心值在一定范围内作有规律的摆动，这种运动称为钟摆运动，可以把钟摆运动看做圆周运动的一部分，进而比较简单的实现钟摆运动

　　假设，元素初始时处于钟摆的最底点。当钟摆与竖直线夹角为60度时，为最高点

　　若钟摆运动的圆心为(x0,y0)，则圆的公式为(x-x0)*(x-x0) + (y-y0)*(y-y0) = r*r

　　若夹角a为钟摆与竖直线夹角，写成三角函数的形式为

  1.     x = x0 + sina*r
  2.     y = y0 + cosa*r

　　当夹角a从0增加到60或减小到-60时，元素开始做反向运动

　　将钟摆运动写成pendulMove.js的形式

  1. function getCSS(obj,style){
  2.     if(window.getComputedStyle){
  3.         return getComputedStyle(obj)[style];
  4.     }
  5.     return obj.currentStyle[style];
  6. }
  7. function pendulMove(json){
  8.     //要操作的元素
  9.     var obj = json.obj;
  10.     //起始方向(顺时针'+'或逆时针'-')
  11.     var dir = json.dir;
  12.     dir = dir || '+';
  13.     //最大次数(再次经过最低点为一次)
  14.     var max = json.max;
  15.     max = Number(max) || 'all';
  16.     //半径
  17.     var r = json.r;
  18.     r = Number(r) || 100;
  19.     //圆心x轴坐标
  20.     var x0 = json.x0 || parseFloat(getCSS(obj,'left'));
  21.     //圆心y轴坐标
  22.     var y0 = json.y0 ||  parseFloat(getCSS(obj,'top')) - r;
  23.     //初始夹角，以角度为单位
  24.     var a0 = json.a0;
  25.     a0 = Number(a) || 0;
  26.     //当前夹角
  27.     var a = json.a ||0;
  28.     //当前次数
  29.     var num = 0;
  30.     //清除定时器
  31.     if(obj.timer){return;}
  32.     //声明当前值cur
  33.     var cur = {};
  34.     obj.timer = setInterval(function(){
  35.         //将这些瞬时值储存在obj对象中的属性中
  36.         obj.a = a;
  37.         obj.x0 = x0;
  38.         obj.y0 = y0;
  39.         obj.x = x;
  40.         obj.y = y;
  41.         obj.num = num;
  42.         //如果元素运动到指定圈数则停止定时器
  43.         if(num == max){
  44.             clearInterval(obj.timer);
  45.         }
  46.         //起始向右运动
  47.         if(dir == '+'){
  48.             a++;
  49.             if(a == 60){
  50.                 //方向变成向左
  51.                 dir = '-';
  52.             }
  53.         }else{
  54.             a--;
  55.             if(a == -60){
  56.                 //方向变成向右
  57.                 dir = '+';
  58.             }
  59.         }
  60.         //更新当前值
  61.         cur.left = parseFloat(getCSS(obj,'left'));
  62.         cur.top = parseFloat(getCSS(obj,'top'));
  63.         //更新left和top值
  64.         var x = x0 + r*Math.sin(a*Math.PI/180);
  65.         var y = y0 + r*Math.cos(a*Math.PI/180)
  66.         test.style.left = x + 'px';
  67.         test.style.top = y + 'px';
  68.     },20);
  69. }

　　下面利用封装的pendulMove.js来实现简单的钟摆运动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8. <button id="btn1">起始正向运动</button>
  9. <button id="btn2">起始逆向运动</button>
  10. <button id="btn3">暂停</button>
  11. <button id="reset">还原</button>
  12. <div id="result"></div>
  13. <div id="backup" style="height: 298px;width:298px;border-bottom:1px solid black;border-radius:50%;position:absolute;top:50px;left:50px;">
  14.     <div id="test" style="height: 40px;width: 40px;background-color:pink;position:relative;left:130px;top:280px;border-radius:50%"></div>
  15. </div>
  16. <script src="http://files.cnblogs.com/files/xiaohuochai/pendulMove.js"></script>
  17. <script>
  18. reset.onclick = function(){
  19.     history.go();
  20. }
  21. btn1.onclick = function(){
  22.     pendulMove({obj:test,r:150,x0:test.x0,y0:test.y0,a:test.a,num:test.num});
  23. }
  24. btn2.onclick = function(){
  25.     pendulMove({obj:test,r:150,dir:'-',x0:test.x0,y0:test.y0,a:test.a,num:test.num});
  26. }
  27. btn3.onclick = function(){
  28.     clearInterval(test.timer);
  29.     test.timer = 0;
  30. }
  31. </script>
  32. </body>
  33. </html>

【弹性运动】

　　实际情况下，钟摆运动并不是匀速运动，而是一个重复的加减速运动，正好弹性运动可以轻松的实现类似效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. <button id="btn1">开始运动</button>
  9. <button id="btn2">暂停</button>
  10. <button id="reset">还原</button>
  11. <div id="test" style="height: 100px;width: 100px;background-color: pink;position:absolute;left:0;top: 30px;border-radius:50%"></div>
  12. <script>
  13. function getCSS(obj,style){
  14.     if(window.getComputedStyle){
  15.         return getComputedStyle(obj)[style];
  16.     }
  17.     return obj.currentStyle[style];
  18. }
  19. reset.onclick = function(){history.go();}
  20. btn2.onclick = function(){
  21.     clearInterval(test.timer);
  22. }
  23. //声明步长值stepY、stepX
  24. var stepY = 30;
  25. var stepX = 10;
  26. btn1.onclick = function(){
  27.     //声明当前值curY、curX
  28.     var curY,curX;
  29.     //声明目标值
  30.     var targetY = parseFloat('400px');
  31.     clearInterval(test.timer);
  32.     test.timer = setInterval(function(){
  33.         //更新当前值
  34.         curY = parseFloat(getCSS(test,'top'));
  35.         curX = parseFloat(getCSS(test,'left'));
  36.         //更新步长值
  37.         stepY -= 1;
  38.         //当元素返回到初始高度时
  39.         if(stepY == -30){
  40.             stepY = 29;
  41.             stepX = -stepX;
  42.         }
  43.         //更新top、left值
  44.         test.style.top = curY + stepY + 'px';
  45.         test.style.left = curX + stepX + 'px';
  46.  
  47.     },20);
  48. }
  49. </script>
  50. </body>
  51. </html>

抛物线运动

　　平面内到定点与定直线的距离相等的点的轨迹叫做抛物线。其中定点叫抛物线的焦点，定直线叫抛物线的准线。抛物线实际上就是一段特殊形式的曲线

　　抛物线方程为y=a*x*x+b*x+c

　　其中a、b、c为参数，以x为参照的话，当x以固定值递增的方式进行变化时，y也会有相应变化

　　若a>0时，抛物线的开口向下；否则，开口向上

　　抛物线的准线的x轴坐标为(-2*a/b)。如果target目标设置为100，则(-2*a/b)尽量设置为50

　　若a = 0.01，则b=-1

　　将抛物线运动写成parabolMove.js的形式

  1. function getCSS(obj,style){
  2.     if(window.getComputedStyle){
  3.         return getComputedStyle(obj)[style];
  4.     }
  5.     return obj.currentStyle[style];
  6. }
  7. function parabolMove(json){
  8.     //设置要操作的元素
  9.     var obj = json.obj;
  10.     //设置x轴上的目标值
  11.     var target = json.target;
  12.     target = Number(target) || 300;
  13.     //设置x轴的步长值
  14.     var stepValue = json.step || 2;
  15.     //设置x轴的步长
  16.     var step = 0;
  17.     //设置回调函数
  18.     var fn = json.fn;
  19.     //参数a、b、c
  20.     var a = json.a;
  21.     a = Number(a) || 0.01;
  22.     var b = json.b;
  23.     b = Number(b) || -1*target/100;
  24.     var c = json.c;
  25.     c = Number(c) || 0;
  26.     //初始值
  27.     var left = parseFloat(getCSS(obj,'left'));
  28.     if(left >= target){return;}
  29.     var top = parseFloat(getCSS(obj,'top'));
  30.     //清除定时器
  31.     if(obj.timer){return;}
  32.     //声明当前值cur
  33.     var cur = {};
  34.     obj.timer = setInterval(function(){
  35.         //更新步长值
  36.         step += stepValue;
  37.         //更新left和top值
  38.         var x = left + step;
  39.         var y = top + a*step*step + b*step + c;
  40.         if(x > target){
  41.             x = target;
  42.         }
  43.         test.style.left = x + 'px';
  44.         test.style.top = y + 'px';
  45.         //如果到达目标点，清除定时器
  46.         if(x == target){
  47.             clearInterval(obj.timer);
  48.             obj.timer = 0;
  49.             fn && fn.call(obj);
  50.         }
  51.     },20);
  52. }

　　下面利用封装的parabolMove.js来实现简单的抛物线运动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8. <button id="btn1">开始运动</button>
  9. <button id="reset">还原</button>
  10. <div id="test" style="height: 40px;width: 40px;background-color:pink;position:absolute;left:0px;top:100px;"></div>
  11.  
  12. <script src="http://files.cnblogs.com/files/xiaohuochai/parabolMove.js"></script>
  13. <script>
  14. reset.onclick = function(){
  15.     history.go();
  16. }
  17. btn1.onclick = function(){
  18.     parabolMove({obj:test,target:200});
  19. }
  20.  
  21. </script>
  22. </body>
  23. </html>

流体运动

　　流体运动实际上就是三角函数曲线运动，以sin为例，y = asin(b*x)，当a和b取不同的值时，就可以得到不同的曲线形式

　　在这里要注意的是，sin里面的参数一定要写成弧度的形式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7. .track{width: 2px;height: 2px;background-color:#000;position:absolute;}
  8. </style>
  9. </head>
  10. <body>
  11. <label for="a" id="labelA">参数a：100</label>
  12. <input id="a" type="range"  min="50" max="100" step="10" value="100" />
  13. <label for="b" id="labelB">参数b：1</label>
  14. <input id="b" type="range" min="1" max="5" step="1"  value="1" />
  15. <button id="reset">还原</button>
  16. <span>三角函数的公式为: y = a*sin(b*x)</span>
  17. <span id="result">所以，实际公式为:y = 100*sin(1*x)</span>
  18. <div id="test" style="height: 50px;width: 50px;background-color: pink;border-radius:50%;position: absolute;left: 30px;top:50px;"></div>
  19. <script>
  20. reset.onclick = function(){
  21.     history.go();
  22. }
  23. function createTracks(x,y){
  24.     var ele = document.createElement('div');
  25.     ele.className = 'track';
  26.     ele.style.left = x + 'px';
  27.     ele.style.top = y + 'px';
  28.     document.body.appendChild(ele);
  29. }
  30. function deleteTracks(){
  31.     var eles = document.getElementsByTagName('div');
  32.     for(var i = 0 ;i < eles.length; i++){
  33.         if(eles[i].className == 'track'){
  34.             document.body.removeChild(eles[i]);
  35.             i--;
  36.         }
  37.     }
  38. }
  39. function getResult(){
  40.     result.innerHTML = '所以，实际公式为: y=' + a.value + '*sin(' + b.value + '*x)';
  41. }
  42. show();
  43. function show(){
  44.     clearInterval(test.timer);
  45.     //重置left、top值
  46.     test.style.left = 30 + 'px';
  47.     test.style.top = 50 + 'px';
  48.     //声明定时器运行次数
  49.     var n = 0;
  50.     //声明拓展倍数
  51.     var value = 100;
  52.     //清除轨迹
  53.     deleteTracks();
  54.     test.timer = setInterval(function(){
  55.         var A = Number(a.value);
  56.         var B = Number(b.value);
  57.         n++;
  58.         var x = (B*n)*Math.PI/180;
  59.         var y = A*Math.sin(x);
  60.         test.style.left = x*value + 'px';
  61.         test.style.top = 2*A+y + 'px';
  62.         createTracks(x*value,2*A+y);
  63.         if(x*value >= document.documentElement.clientWidth - 2*test.offsetWidth){
  64.             clearInterval(test.timer)
  65.         }
  66.     },20)
  67. }
  68. a.oninput = function(){
  69.     labelA.innerHTML = '参数a：' + this.value;
  70.     getResult();
  71.     show();
  72. }
  73. b.oninput = function(){
  74.     labelB.innerHTML = '参数b：' + this.value;
  75.     getResult();
  76.     show();
  77. }
  78. </script>
  79. </body>
  80. </html>

javascript运动系列第三篇——曲线运动的更多相关文章

  1. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  2. 深入理解javascript函数系列第三篇——属性和方法

    × 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...

  3. 深入理解javascript作用域系列第三篇——声明提升(hoisting)

    × 目录 [1]变量 [2]函数 [3]优先 前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javasc ...

  4. 深入理解javascript作用域系列第三篇

    前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇——声明提升(hois ...

  5. 深入理解javascript函数系列第三篇

    前面的话 函数是javascript中特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本文是深入理解javascript函数 ...

  6. javascript运动系列第四篇——抖动

    × 目录 [1]原理介绍 [2]代码实现 [3]实例应用 前面的话 在运动系列中,前面分别介绍了匀速运动.变速运动和曲线运动.下面介绍一种特殊的运动形式——抖动 原理介绍 抖动其实是往复运动的一种特殊 ...

  7. javascript运动系列第八篇——碰壁运动

    × 目录 [1]匀速碰壁 [2]自由落体 [3]投掷碰壁[4]拖拽碰壁 前面的话 碰撞运动可能是运动系列里面比较复杂的运动了.碰撞可以分为碰壁和互碰两种形式,而碰撞前后的运动形式也可以分为变速和匀速两 ...

  8. javascript动画系列第三篇——碰撞检测

    前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...

  9. javascript运动系列第六篇——轨迹和投掷

    × 目录 [1]运动轨迹 [2]拖拽轨迹 [3]投掷 前面的话 一般地,不同的运动形式会产生不同的轨迹.但仅凭肉眼去识别运动轨迹,其实并不是很直观.因此,在页面中显示运动轨迹,是一个重要的问题.物体初 ...

随机推荐

  1. ACM: FZU 2105 Digits Count - 位运算的线段树【黑科技福利】

     FZU 2105  Digits Count Time Limit:10000MS     Memory Limit:262144KB     64bit IO Format:%I64d & ...

  2. Ubuntu安装Oracle SQLDeveloper

    1、下载Oracle安装文件 这里我下载的是Linux RPM版本，文件名为sqldeveloper-4.0.3.16.84-1.noarch.rpm http://www.oracle.com/te ...

  3. tcpdum使用

    安装tcpdump包:yum install -y tcpdump ,不加”-i eth0”是表示抓取所有的接口包括lo. 1.抓取包含10.88.88.96的数据包 # tcpdump -i eth ...

  4. setTimeout 学习闭包

    @(技术笔记)[css] 学习参考网站 css 网站,可供参考 javascript学习网站 var create = function (i){ return function(){ console ...

  5. HDU3465 树状数组逆序数

    Life is a Line Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)T ...

  6. 利用fsockopen可实现异步成功访问

    $fp = fsockopen("www.jb51.net", 80, $errno, $errstr, 30); if (!$fp) { echo "$errstr ( ...

  7. JeeSite学习笔记~代码生成原理

    1．建立数据模型[单表,一对多表,树状结构表] 用ERMaster建立数据模型,并设定对应表,建立关联关系 2.系统获取对应表原理 1.怎样获取数据库的表 genTableForm.jsp: < ...

  8. USACO翻译：USACO 2012 JAN三题（2）

    USACO 2012 JAN(题目二) 一.题目概览 中文题目名称 叠干草 分干草 奶牛联盟 英文题目名称 stacking baleshare cowrun 可执行文件名 stacking bale ...

  9. 爬虫初探(2)之requests

    关于请求网络,requests这个库是爬虫经常用到的一个第三方库. import requests url = 'http://www.baidu.com' #这里用get方法用来请求网页,其他还有p ...

  10. c#控制打印机杂项

    因项目中需要用到控制打印机的相关信息,此贴将网络寻找的资料做了些整理 1. C# 如何设置系统的默认打印机 using System.Runtime.InteropServices;   [DllIm ...