一、链式运动

首先，要改进运动框架

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.οnmοuseοver=function(){

　　startMove(oDiv,'width',300,function(){

　　　　startMove(oDiv,'height',333,function(){

　　　　　　startMove(oDiv,'opacity',100);

　　　　});

　　});

}

oBtn.οnmοuseοut=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].οnmοuseοver=function(){

this.style.zIndex=minIndex++;//console.log(this.style.zIndex);确保当前图片的层级为最高

startMove(this,{width:200,height:200,margin:-50});

}

aLi[i].οnmοuseοut=function(){

startMove(this,{width:100,height:100,margin:10});

}

}

for(i=0;i<oImg.length;i++){

oImg[i].οnmοuseοver=function(){

startMove(this,{width:300,height:200,margin:0});

}

oImg[i].οnmοuseοut=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.οnclick=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].οnclick=function(){

　　iSpeed=-3;

};

aA[1].οnclick=function(){

　　iSpeed=3;

};

oDiv.οnmοuseοver=function(){

　　clearInterval(timer);

}

oDiv.οnmοuseοut=function(){

　　timer=setInterval(fnMove,30);

}