javascript-运动-运动框架
总结一下现在学习到的javascript运动框架，先列出一些问题及解决方法吧
1 运动不会停止
添加if判断，当到达你要的目标就会停止
if (var == target) { //清空定时器 }
2 对于问题1扩展 当添加if相等时，可能不会正好相等，会大于等于或小于等于
if ( var >= target ) { //清空定时器 }
3 当完成1或2的条件停止时，在出发相应事件会继续往前动
因为if判断执行后清空定时器，但是定时器后面的语句仍然执行了，这里后面加上else，当到达临界条件，执行清空定时器，否则就执行运动
if ( var >= target ) {
//清空定时器
} else {
// 运动代码
}
4 当多次出发运动事件时，会产生加速效果
因为多次出发时，开了多个定时器，就开始叠加递增或递减
运动框架出发前清空定时器
function startMove () {
clearInterval(timer);
timer = setInterval(function () {
},100);
}
5 封装到一个运动函数中，运动中肯定有相反运动，向左或者像右，向上或者向下
即传入一个target目标值，即大于目标值，取负值，小于目标值的的时候取正值
if(iCur < target) {
speed = -5;
} else {
speed = 5;
}
6 高级一点的，前面的都是一个运动项目在发生运动，当多个项目发生运动时呢
这里就用到前面所学的知识，当需要一一对照时，加上索引或者属性，这里以我写的一个多框透明度变化为例，
为每一个框加上timer属性和alpha透明值属性，这样他们就各自拥有了timer定时器引用和alpha透明值属性了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="generator" content="editplus" /> <meta name="author" content="han" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title> js实现同一个页面多个渐变效果 </title> <style> body,ul { margin:0; padding:0;} ul { list-style:none;} li { width:100px; height:100px; background:blue; float:left; margin-left:10px; filter:alpha(opacity=30); opacity:0.3;} </style> <script> // 要点： // allBox[i].timer = null; // allBox[i].alpha = 30; // 每一个运动框都添加了两个属性，一个timer计时器属性和alpha透明度属性，他们计时器和透明度分开 window.onload = function () { var boxWrap = document.getElementById('box'), allBox = boxWrap.getElementsByTagName('li'), len = allBox.length, i; for (i=0; i<len; i++) { allBox[i].timer = null; allBox[i].alpha = 30; allBox[i].onmouseover = function () { startRun(this,100); }; allBox[i].onmouseout = function () { startRun(this,30); }; } // function startRun (obj, nTarget) { // clearInterval(obj.timer); // obj.timer = setInterval(function () { // // var speed = 0; // // if (obj.alpha < nTarget) { // speed = 5; // } else { // speed = -5; // } // if (obj.alpha === nTarget) { // clearInterval(obj.timer); // }else{ // obj.alpha += speed; // obj.style.opacity = obj.alpha/100; // obj.style.filter = 'alpha(opacity:'+obj.alpha+')'; // } // // },30); // } //思考用自己以前的想法怎么实现 function startRun (obj, nTarget) { clearInterval(obj.timer); var iCur = css(obj,'opacity')*100; obj.timer = setInterval(function () { var speed = (nTarget - iCur)/8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (iCur === nTarget) { clearInterval(obj.timer); } else { iCur += speed; obj.style.opacity = iCur/100; obj.style.filter = 'alpha(opacity:'+iCur+')'; } },100); } function css (obj, attr) { if (obj.currentStyle) { return obj.currentStyle['opacity']; } else { return getComputedStyle(obj,false)[attr]; } } } </script> </head> <body> <ul id="box"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
