js动画（二）

嗯，今天好冷，特别冷，我的手指，都冻的打不了字了。今天一件特别的傻的事就是，在 for(var i;i<obj.length;i++){}

找了半天没有注意到 var i 没有赋值。够150 了吧。

直接上货吧！！！

 

哎，还没有够150 ，那就再搞一个吧，当与彩蛋。

用一个方法直接获取样式值

function getStyle(obj,attr){/*obj对象，就是你要搞哪个元素，attr属性，你要搞哪个的属性*/

      if(obj.currentStyle){

         return obj.currentStyle[attr];/*.currentStyle针对IE*/

      }

      else{

        return getComputedStyle(obj,flase)[attr];/* getComputedStyle针对firebox浏览器*/

      }

}

多物体变速（匀速）运动

 

 

<script>
		window.onload=function(){
			var ind = document.getElementsByTagName("li");
			for(var i=0;i<ind.length;i++){/*取到多个物体*/
				ind[i].timer=null;/*当遇到多个对象时，最好不用全局变量，可能会发生争夺现象*/
				ind[i].onmouseover = function(){
					onMove(this,400,10); /*这里控制，对象，目标值，速度*/
				}
				ind[i].onmouseout = function(){
					onMove(this,200,-10);
				}
			}
		}
		function onMove(obj,mu,speed){
			clearInterval(obj.timer);
			
			obj.timer=setInterval(function(){
				
			speed=(mu-obj.offsetWidth)/8;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			/*变速在这里，两行，删除直接是 匀速*/

			if(obj.offsetWidth == mu)
			   {
			   	clearInterval(obj.timer);
			   }
			else{
				obj.style.width=obj.offsetWidth+speed+"px";
				}
			},30)
		}
	</script>

多物体透明度运动

<script>
		window.onload=function(){
			var opp = document.getElementsByClassName("page");
			for(var i=0;i<opp.length;i++){
				
				opp[i].timer=null;
				opp[i].a=30; /*透明度，没有直接获取当前透明度的方法，所以自生成*/
				
				opp[i].onmouseover = function(){
					onStart(this,100,5);/*这里控制对象，目标值，速度*/
				}
				opp[i].onmouseout = function(){
					onStart(this,30,-5);
				}
			}
		}
		function onStart(obj,mu,speed){
			clearInterval(obj.timer);
			obj.timer=setInterval(function(){
				if(obj.a == mu){
					clearInterval(obj.timer);
				}
				else{
					obj.a+=speed;
					obj.style.opacity=(obj.a)/100;
				}
			},10)