标签：
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. 运动框架介绍
一套框架完成多件事
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 的动画内容。
标签：
原文地址：http://www.cnblogs.com/xs-yqz/p/4484797.html
