html里水平运动实现,HTML+JavaScript实现链式运动特效

在学习js的过程中，发现这家伙做特效真是不错，尽管说眼下水平还不够，只是也能写点简单的效果。

今天分享一个简单的运动框架。然后利用这个框架实现简单的链式运动特效。

1.move.js

在运动框架中。主要进行长宽变化和透明度的变化。长宽的变化能够实现DIV的体积运动变化效果。透明度的话主要是在鼠标移入移出事件中加入淡入淡出的效果。我将这个简单的运动框架封装到一个单独的js文件里，方便调用。

先看看代码：

//用于获取非行间样式

function getStyle(obj,name){

if(obj.currentStyle){

return obj.currentStyle[name];

}else{

return getComputedStyle(obj,false)[name];

}

}

//四个參数分别为对象，属性，改动值，函数

function startMove(obj,attr,iTarget,func){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var cur=0;

//推断要变化的属性是否为透明度

if(attr=='opacity'){

cur=parseFloat(getStyle(obj,attr)*100);

}else{

cur=parseInt(getStyle(obj,attr));

}

//运动速度计算

var speed=(iTarget-cur)/6;

speed=speed>0?

Math.ceil(speed):Math.floor(speed);

if(cur==iTarget){

clearInterval(obj.timer);

//若存在函数參数。则运行函数

if(func){

func();

}

}else{

if(attr=='opacity'){

//保证IE和FF的兼容性

obj.style.filter='alpha(opacity:'+(cur+speed)+')';

obj.style.opacity=(cur+speed)/100;

}else{

obj.style[attr]=cur+speed+'px';

}

}

},30);

}

2.index.html

#div1{

width:100px;

height:100px;

background:red;

filter:alpha(opacity:30);opacity:0.3;

}

window.οnlοad=function(){

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

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

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

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

startMove(oDiv,'opacity',100);

});

});

};

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

startMove(oDiv,'opacity',30,function(){

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

startMove(oDiv,'width',100);

});

});

};

};

在mouseover中：先将DIV进行width变化，等运动结束。

然后进行height变化，最后进行opacity变化。

在mouseout中：先进行opacity变化，然后是height变化，最后进行width变化。就是和移入事件运动顺序全然相反。(此实例并无直接应用意义，可是对运动框架进行一些完好之后就能够做一些常见的特效了)

在startMove()的使用过程中。有类似与递归调用的感觉。只是这个好理解多了。

3.小结

尽管说运动框架仅仅有几十行的代码，可是当中的细节还是非常多的。假设实用到这个框架的同学，在使用的时候先好好整理代码的逻辑。要不然出了bug。也真够虐心的。还好，我把凝视写的非常清楚了，希望能帮助到有须要的人。

上两张运动前后的图：

(忽略水印)

详细运动过程还是自己实践一番为好，再稍作修饰的话。效果肯定倍加。