js基础之动画（二）

一、多物体同时运动

栗子一：多个Div，鼠标移入变高，动态下拉菜单

function startMove(obj,iTarget){ 
　　clearInterval(obj.timer);
　　obj.timer=setInterval(function(){
　　　　var iSpeed=(iTarget-obj.offsetHeight)/8;
　　　　iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
　　　　if(obj.offsetHeight==iTarget){
　　　　　　clearInterval(obj.timer);
　　　　}else{
　　　　　　obj.style.height=obj.offsetHeight+iSpeed+'px';
　　　　}
　　},30);
}
  window.onload=function(){
　　var oMenu = document.getElementsByClassName('menu');
　　var i=0;
　　for(i=0;i<oMenu.length;i++){
　　　　oMenu[i].timer=null;//每个div都有自己的定时器
　　　　oMenu[i].onmouseover=function(){
　　　　　　startMove(this,300);
　　　　　　//setTimeout(function(){document.getElementsByClassName('mList').item(0).style.display='block'},100);
　　　　}
　　　　oMenu[i].onmouseout=function(){
　　　　　　startMove(this,30);
　　　　}
　　}

}

 栗子二：多个div淡入淡出

function startMove(obj,iTarget){
　　clearInterval(obj.timer);
　　obj.timer=setInterval(function(){
　　　　var iSpeed=(iTarget-obj.alpha)/8;
　　　　iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

　　　　if(obj.alpha==iTarget){
　　　　　　clearInterval(obj.timer);
　　　　}else{
　　　　　　obj.alpha+=iSpeed;document.title=obj.alpha;
　　　　　　obj.style.filter='alpha(opacity:'+obj.alpha+')';
　　　　　　obj.style.opacity=obj.alpha/100;
　　　　}
　　},30);
}

  window.onload=function(){
　　var oMenu = document.getElementsByClassName('menu');
　　var i=0;
　　for(i=0;i<oMenu.length;i++){
  　　　　oMenu[i].alpha=null;//把透明度与对象绑定，其他属性也一样
　　　　oMenu[i].onmouseover=function(){
　　　　　　startMove(this,300);
　　　　　　//setTimeout(function(){document.getElementsByClassName('mList').item(0).style.display='block'},100);
　　　　}
　　　　oMenu[i].onmouseout=function(){
　　　　　　startMove(this,30);
　　　　}
　　}

}

栗子三：多个div不同属性

function getStyle(obj,attr){
　　if(obj.currentStyle){
　　　　return obj.currentStyle[attr];
　　}else{
　　　　return getComputedStyle(obj,false)[attr];
　　}
}
function startMove(obj,attr,iTarget){//多div运动
//var obj = document.getElementsByClassName('menu');

clearInterval(obj.timer);
obj.timer=setInterval(function(){
　　var iCur=0;
　　if(attr=='opacity'){
　　　　var iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
　　}else{
　　　　var iCur=parseInt(getStyle(obj,attr));
}

var iSpeed=(iTarget-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);console.log(iSpeed+'/'+iCur);
　　if(iCur==iTarget){
　　　　clearInterval(obj.timer);
　　}else{
　　　　if(attr=='opacity'){
　　　　　　obj.style.fliter='alpha(opacity:'+(iCur+iSpeed)+')';
　　　　　　obj.style.opacity=(iCur+iSpeed)/100;
　　　　}else{
　　　　　　obj.style[attr]=iCur+iSpeed+'px';console.log(obj.style.attr);
　　　　}

　　}
},30);
  }
window.onload=function(){

var oMenu = document.getElementsByClassName('menu');
var i=0;
for(i=0;i<oMenu.length;i++){
　　oMenu[i].timer=null;
　　oMenu[i].onmouseover=function(){
　　　　startMove(this,'opacity',100);
　　　　//startMove(this,'width',300);
　　　　//startMove(this,'height',300);
　　　　//startMove(this,'font-size',50)
　　　　setTimeout(function(){document.getElementsByClassName('mList').item(0).style.display='block'},100);
　　}
　　oMenu[i].onmouseout=function(){
　　　　startMove(this,'opacity',10);
　　　　//startMove(this,'width',10);
　　　　//startMove(this,'height',30);
　　　　//startMove(this,'font-size',20)
　　}
}

}

二、封装自己的运动框架

function getStyle(obj,attr){
　　if(obj.currentStyle){
　　　　return obj.currentStyle[attr];
　　}else{
　　　　return getComputedStyle(obj,false)[attr];
　　}
}
function startMove(obj,attr,iTarget){//多div运动
//var obj = document.getElementsByClassName('menu');

clearInterval(obj.timer);
obj.timer=setInterval(function(){
　　var iCur=0;
　　if(attr=='opacity'){
　　　　var iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
　　}else{
　　　　var iCur=parseInt(getStyle(obj,attr));
}

var iSpeed=(iTarget-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);console.log(iSpeed+'/'+iCur);
　　if(iCur==iTarget){
　　　　clearInterval(obj.timer);
　　}else{
　　　　if(attr=='opacity'){
　　　　　　obj.style.fliter='alpha(opacity:'+(iCur+iSpeed)+')';
　　　　　　obj.style.opacity=(iCur+iSpeed)/100;
　　　　}else{
　　　　　　obj.style[attr]=iCur+iSpeed+'px';console.log(obj.style.attr);
　　　　}

　　}
},30);
  }