js基础之动画(二)

时间:2021-03-09 12:56:35

一、多物体同时运动

栗子一:多个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);
  }