11,运动基础框架（匀速）
匀速运动（框架）：给物体不断加速度，用setInterval来循环执行；
用timer来储存setInterval返回的id值；clearInterval(timer);清除定时器，让运动停止。用if else 来判断运动是移动还是停止；
每执行一次事件（点击按钮）要清楚一次定时器，防止定时器叠加使速度不断加快；
<body> <input id="btn1" type="button" value="开始运动" onclick="startMove()" /> <div id="div1">
js代码：
<script> var timer=null; function startMove() { var oDiv=document.getElementById('div1'); clearInterval(timer);//清除上一次点击时发生的定时器 timer=setInterval(function (){ var speed=1; //判断是运动还是停止 if(oDiv.offsetLeft>=300) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } }, 30); } </script>
练习：分享到
鼠标移入移出，改变div的左侧距离（用匀速运动框架）；用当前的左侧距离oDiv.offsetLef与目标点iTarget比较；借以判断速度方向，oDiv.offsetLeft<iTarget则iSpeed为正，反之则为负；
当到达目标点时，关闭定时器，运动停止；
HTML:
<body> <div id="div1"> <span>分享到</span> </div>
CSS:right:-20;
<style> #div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;} #div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;} </style>
JS:
<script> window.onload=function () { var oDiv=document.getElementById('div1'); oDiv.onmouseover=function () { startMove(0); }; oDiv.onmouseout=function () { startMove(-150); }; }; var timer=null; function startMove(iTarget) { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=0; if(oDiv.offsetLeft>iTarget)//判断速度方向； { speed=-10; } else { speed=10; } if(oDiv.offsetLeft==iTarget)//运动或停止； { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } }, 30); } </script>
练习2：图片淡入淡出；
改变图片的透明度：opacity来实现；用运动框架改变opacity;当前的透明度用一个变量储存：Alhpa=30；比较Alpha与iTarget目标值之间大小来确定速度方向。
透明度变化过程：Alpha+=iSpeed;变化的是Alpha,再将该值赋值给oDiv.style.filter:(ie)或者oDiv.style.opacity;
html:
<body> <div id="div1"></div> </body>
JS:
<script> window.onload=function () { var oDiv=document.getElementById('div1'); oDiv.onmouseover=function () { startMove(100); }; oDiv.onmouseout=function () { startMove(30); }; }; var alpha=30; var timer=null; function startMove(iTarget) { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=0; if(alpha<iTarget) { speed=10; } else { speed=-10; } if(alpha==iTarget) { clearInterval(timer); } else { alpha+=speed; oDiv.style.filter='alpha(opacity:'+alpha+')'; oDiv.style.opacity=alpha/100; } }, 30); } </script>
