本文共 1975 字，大约阅读时间需要 6 分钟。

	
   		
   	  
   
	  		
    
	  			
     
		  			
     
		  			
     
		  			
     
		  			
     
		  		
    
	  		
    
	  				  			
     	  			
     	  			
     	  			
     	  			
     	  		
    
	  
   
	  move	  

以上是所有代码，首先我们必须掌握的就是布局！

上面的布局，是我将

这样就把五张图片显示出来了，布局还是需要看一看的，子绝父相的使用，还是很牛的，另外

布局水平居中的小算法，还是要会的

布局写好，就是老三篇了，一找到控件，二，加事件，三，事件联动处理，这个我都写好多遍了，上面

无法就是点那个指示器，哪个就变成红色，然后执行动画，动画的执行，无非用运动就搞定了！

运动框架的代码

function startMove(obj,json,fn) {            clearInterval(obj.timer);            obj.timer = setInterval(function () {                var bStop = true;                for(attr in json){                    // 1. 取得当前的值（可以是widht，height，opacity等的值）                    var objAttr = 0;                    if(attr == "opacity"){                        objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);                    }else{                        objAttr = parseInt(getStyle(obj,attr));                    }                    // 2.计算运动速度                    var iSpeed = (json[attr] -objAttr)/10;                        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);                    // 3. 检测所有运动是否到达目标                    if(objAttr != json[attr]){                        bStop = false;                    }                    if(attr == "opacity"){                        obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';                        obj.style.opacity = (objAttr+iSpeed)/100;                    }else{                        obj.style[attr] =  objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]                    }                }                if(bStop){ // 表示所有运动都到达目标值                    clearInterval(obj.timer);                    if(fn){                        fn();                    }                }            },30);        }	  		// 获取样式属性	  		function getStyle(obj,attr){	  			if(window.getComputedStyle){	  					return window.getComputedStyle(obj,null)[attr];	  			}else{	  				return obj.currentStyle[attr];	  			}	  		}

行，这个还是比较简单的