js基础之动画（三）

一、链式运动

首先，要改进运动框架

function getStyle(obj,attr){
　　if(obj.currentStyle){
　　　　return obj.currentStyle[attr];
　　}else{
　　　　return getComputedStyle(obj,false)[attr];
　　}
}
 function startMove(obj,attr,iTarget,fn){//多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);

　　　　if(fn){fn()};
　　}else{
　　　　if(attr=='opacity'){
  　　　　　　obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
　　　　　　obj.style.opacity=(iCur+iSpeed)/100;
　　　　}else{
　　　　　　obj.style[attr]=iCur+iSpeed+'px';console.log(obj.style.attr);
　　　　}

　　}
},30);
  }

然后引用即可

var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');

oBtn.onmouseover=function(){
　　startMove(oDiv,'width',300,function(){
　　　　startMove(oDiv,'height',333,function(){
　　　　　　startMove(oDiv,'opacity',100);
　　　　});
　　});
}
oBtn.onmouseout=function(){
　　startMove(oDiv,'opacity',50,function(){
　　　　startMove(oDiv,'height',20,function(){
　　　　　　startMove(oDiv,'width',0);
　　　　});
　　});
}

二、用json打造完美框架

 function getStyle(obj,attr){
　　if(obj.currentStyle){
　　　　return obj.currentStyle[attr];
　　}else{
　　　　return getComputedStyle(obj,false)[attr];
　　}
}
 function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var bStop=true;//如为真，这次运动结束，所有值都达到目标
for(var attr in json){
//1.取当前的位置
var iCur=0;
if(attr=='opacity'){
var iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
var iCur=parseInt(getStyle(obj,attr));
}
//2.算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);//console.log(iSpeed+'/'+iCur);

//3.检测停止
if(iCur!=json[attr]){
bStop=false;
}
if(attr=='opacity'){
  obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}else{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop){
clearInterval(obj.timer);
if(fn){fn()};
}
},30);
}

三、照片墙——多图展开、收缩

var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var oImg = document.getElementsByClassName('img1');
//js布局
var minIndex=2;//设置层级初始值
var i=0;
for(i=0;i<aLi.length;i++){
//aLi[i].innerHTML='left:'+aLi[i].offsetLeft+',top:'+aLi[i].offsetTop;
aLi[i].style.left=aLi[i].offsetLeft+'px';
aLi[i].style.top=aLi[i].offsetTop+'px';
}
for(i=0;i<aLi.length;i++){
aLi[i].style.position='absolute';
}
//加事件
for(i=0;i<aLi.length;i++){

aLi[i].onmouseover=function(){
this.style.zIndex=minIndex++;//console.log(this.style.zIndex);确保当前图片的层级为最高
startMove(this,{width:200,height:200,margin:-50});


}
aLi[i].onmouseout=function(){
startMove(this,{width:100,height:100,margin:10});
}
}
for(i=0;i<oImg.length;i++){
oImg[i].onmouseover=function(){
startMove(this,{width:300,height:200,margin:0});
}
oImg[i].onmouseout=function(){
startMove(this,{width:100,height:100,margin:0});
}
}

四、新浪微博之大家正在说

var oTxt = document.getElementById('txt1');
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');

oBtn.onclick=function(){
  var oLi = document.createElement('div');//这里要用div替换li，否则IE7的移动效果会卡
var aLi = oUl.getElementsByTagName('div');//这里要用div替换li，否则IE7的移动效果会卡

oLi.innerHTML=oTxt.value;
oTxt.value='';

if(aLi.length){
oUl.insertBefore(oLi,aLi[0]);
}else{
oUl.appendChild(oLi);
}

var iHeight=oLi.offsetHeight;
oLi.style.height=0;

startMove(oLi,{height:iHeight},function(){
startMove(oLi,{opacity:100});//alert();
});
}

布局的时候也要用div套div代替ul套li

五、无缝滚动

 var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var aA = document.getElementsByTagName('a');
var timer=null;
var iSpeed=-3;

oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=oLi.length*oLi[0].offsetWidth+'px';
function fnMove(){
　　if(oUl.offsetLeft<-oUl.offsetWidth/2){
　　　　oUl.style.left=0;
　　}else if(oUl.offsetLeft>0){
　　　　oUl.style.left=-oUl.offsetWidth/2+'px';
　　}
oUl.style.left=oUl.offsetLeft+iSpeed+'px';
}
timer=setInterval(fnMove,30);

aA[0].onclick=function(){
　　iSpeed=-3;
};
aA[1].onclick=function(){
　　iSpeed=3;
};
oDiv.onmouseover=function(){
　　clearInterval(timer);
}
oDiv.onmouseout=function(){
　　timer=setInterval(fnMove,30);
}