js运动基础
1. 什么是运动
2. 如何让DIV动起来，运动停止条件
1 function startMove() 2 { 3 var oDiv=document.getElementById('div1'); 4 5 timer=setInterval(function (){ 6 var iSpeed=7; 7 8 if(oDiv.offsetLeft>=300) 9 { 10 //运动一旦达到我的要求，就应该让运动停止，取消定时器 clearInterval 11 clearInterval(timer); 12 } 13 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 14 }, 30); 15 }
3. 解决连续点击引发的重复运动问题
1 var timer=null;//设置一个定时器，便于取消定时器 2 3 function startMove() 4 { 5 var oDiv=document.getElementById('div1'); 6 7 timer=setInterval(function (){ 8 var iSpeed=10; 9 10 if(oDiv.offsetLeft>=300) //是否到达终点 11 { 12 //运动一旦达到我的要求，就应该让运动停止，取消定时器 clearInterval 13 clearInterval(timer); //到达终点 14 } 15 else 16 { //用else来解决连续重复点击速度加快的问题 17 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; //到达之前 18 } 19 }, 30); 20 }
4. 消除重复点击速度加快的问题
因为每次点击一次按钮就开一个定时器，导致定时器同时开了好多个，因此我们只需要保证永远只有一个定时器，在前面加一个clearInterval取消前面的定时器，保证整个过程中只开启一个定时器。
1 var timer=null; 2 3 function startMove() 4 { 5 var oDiv=document.getElementById('div1'); 6 //防止在点击多次之后同时开启多个定时器，在一开始就关掉原来所有的定时器，保证点击时只会开一个定时器。 7 clearInterval(timer); 8 timer=setInterval(function (){ 9 var iSpeed=5; 10 11 if(oDiv.offsetLeft>=300) //是否到达终点 12 { 13 clearInterval(timer); //到达终点 14 } 15 else 16 { 17 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; //到达之前 18 } 19 }, 30); 20 }
5. 运动框架介绍
1.在开始运动时，关闭已有定时器
2.把运动和停止隔开（if/else）
一套框架完成多件事
6. “分享到”侧边栏实例——便用运动框架
思考问题的实质，侧边缘广告的实质是鼠标的移入移出，我们在这里加上定时器，让他显示的比较好看
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 <style> 5 #div1 {width:100px; height:200px; background:#CCC; position:absolute; left:-100px;} 6 #div1 span {width:20px; height:60px; line-height:20px; text-align:center; left:100px; top:70px; background:yellow; position:absolute;} 7 8 </style> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 10 <title>无标题文档</title> 11 <script type="text/javascript"> 12 window.onload=function () 13 { 14 var oDiv=document.getElementById('div1'); 15 16 //给div加入一个鼠标移入的事件 17 oDiv.onmouseover=function () 18 { 19 startMove();//函数调用 20 } 21 //给div加入一个鼠标移出的事件 22 oDiv.onmouseout=function () 23 { 24 startMove2();//函数调用 25 } 26 } 27 var timer=null; 28 29 function startMove() 30 { 31 var oDiv=document.getElementById('div1'); 32 33 clearInterval(timer); 34 timer=setInterval(function (){ 35 var iSpeed=10; 36 37 if(oDiv.offsetLeft==0) 38 { 39 clearInterval(timer); 40 } 41 else 42 { 43 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 44 } 45 }, 30); 46 } 47 48 function startMove2() 49 { 50 var oDiv=document.getElementById('div1'); 51 52 clearInterval(timer); 53 timer=setInterval(function (){ 54 var iSpeed=-10; 55 56 if(oDiv.offsetLeft==-100) 57 { 58 clearInterval(timer); 59 } 60 else 61 { 62 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 63 } 64 }, 30); 65 } 66 </script> 67 </head> 68 69 <body> 70 <div id="div1"> 71 <span>分享到</span> 72 </div> 73 </body> 74 </html>
7. 简化函数参数的意义、方式
对于有相同的内容的代码，用函数包装起来
1 window.onload=function () 2 { 3 var oDiv=document.getElementById('div1'); 4 5 oDiv.onmouseover=function () 6 { 7 startMove(10, 0); 8 } 9 10 oDiv.onmouseout=function () 11 { 12 startMove(-10, -100); 13 } 14 } 15 var timer=null; 16 17 function startMove(iSpeed, iTarget) 18 { 19 var oDiv=document.getElementById('div1'); 20 21 clearInterval(timer); 22 timer=setInterval(function (){ 23 24 if(oDiv.offsetLeft==iTarget) 25 { 26 clearInterval(timer); 27 } 28 else 29 { 30 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 31 } 32 }, 30); 33 }
1 window.onload=function () 2 { 3 var oDiv=document.getElementById('div1'); 4 5 oDiv.onmouseover=function () 6 { 7 startMove(0); 8 } 9 10 oDiv.onmouseout=function () 11 { 12 startMove(-100); 13 } 14 } 15 var timer=null; 16 17 function startMove(iTarget) 18 { 19 var oDiv=document.getElementById('div1'); 20 21 clearInterval(timer); 22 timer=setInterval(function (){ 23 var iSpeed=0; 24 25 if(oDiv.offsetLeft<iTarget) 26 { 27 iSpeed=10; 28 } 29 else 30 { 31 iSpeed=-10; 32 } 33 34 if(oDiv.offsetLeft==iTarget) 35 { 36 clearInterval(timer); 37 } 38 else 39 { 40 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 41 } 42 }, 30); 43 }
8. 淡入淡出的图片实例（上）
1 window.onload=function () 2 { 3 var oImg=document.getElementById('img1'); 4 5 oImg.onmouseover=function () 6 { 7 startMove(100); 8 } 9 10 oImg.onmouseout=function () 11 { 12 startMove(30); 13 } 14 } 15 var timer=null; 16 17 var alpha=30; 18 19 function startMove(iTarget) 20 { 21 var oImg=document.getElementById('img1'); 22 23 clearInterval(timer); 24 timer=setInterval(function (){ 25 var iSpeed=0; 26 27 if(alpha<iTarget) 28 { 29 iSpeed=5; 30 } 31 else 32 { 33 iSpeed=-5; 34 } 35 36 if(alpha==iTarget) 37 { 38 clearInterval(timer); 39 } 40 else 41 { 42 alpha+=iSpeed; 43 44 oImg.style.filter='alpha(opacity:'+alpha+')'; 45 oImg.style.opacity=alpha/100; 46 47 document.title=alpha; 48 } 49 }, 30); 50 }
图片淡入淡出的效果用css3写完全没有问题，可以看css3 的动画内容。
运动基础（二）
1. 淡入淡出的图片（下）
2. 缓冲运动：缓冲运动的原理、缓冲运动的取值问题
距离与速度成正比 缓冲运动中一定要注意取整，否则就不能达到我们所要要求的准确状态
3. Math.ceil、Math.floor 方法
思考：为什么要进行向上取整和向下取整
1 var timer=null; 2 3 function startMove(iTarget) 4 { 5 var oDiv=document.getElementById('div1'); 6 7 clearInterval(timer); 8 timer=setInterval(function (){ 9 var iSpeed=(iTarget-oDiv.offsetLeft)/8; 10 //速度为正的时候，向上取整 11 //速度为负的时候，向下取整 12 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 13 /*if(iSpeed>0) 14 { 15 iSpeed=Math.ceil(iSpeed); 16 } 17 else 18 { 19 iSpeed=Math.floor(iSpeed); 20 }*/ 21 22 if(oDiv.offsetLeft==iTarget) //是否到达终点 23 { 24 clearInterval(timer); //到达终点 25 } 26 else 27 { 28 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; //到达之前 29 } 30 31 document.title=oDiv.offsetLeft+',speed='+iSpeed; 32 }, 30); 33 }
4. 带缓冲运动的侧边栏实例
1 window.onscroll=function () 2 { 3 var oDiv=document.getElementById('div1'); 4 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 5 6 //oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px'; 7 var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2; 8 9 startMove(parseInt(t));//parseInt(t)取整，防止div抖动 10 } 11 12 var timer=null; 13 14 function startMove(iTarget) 15 { 16 var oDiv=document.getElementById('div1'); 17 18 clearInterval(timer); 19 timer=setInterval(function (){ 20 var iSpeed=(iTarget-oDiv.offsetTop)/8; 21 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 22 23 if(oDiv.offsetTop==iTarget) 24 { 25 clearInterval(timer); 26 } 27 else 28 { 29 oDiv.style.top=oDiv.offsetTop+iSpeed+'px'; 30 } 31 32 txt1.value=oDiv.offsetTop+',目标：'+iTarget; 33 }, 30); 34 }
5. 解决缓冲运动目标值不是整数的情况
利用parseInt() 进行取整
6. 匀速运动的停止条件、缓冲运动停止条件
匀速运动：距离足够近
缓冲运动：两点重合
