跟着视频学习些的运动框架,使用很简单,简单写一个使用的例子:
鼠标移入将透明度从60变成100,前提是css布局里面对象已经有opacity属性值
window.οnlοad=function()
{
var aDiv=document.getElementsByTagName('div');
var i=0;
for(i=0;i<aDiv.length;i++)
{
aDiv[i].οnmοuseοver=function()
{
startMove(this,'opacity',100);
}
aDiv[i].οnmοuseοut=function()
{
startMove(this,'opacity',60);
}
}
}
框架本身的代码:
// JavaScript Document
/*
**
多物体,任意值运动框架
obj:要运动的对象 attr:需要改变的属性 iTarget:属性值需要到达的目标点
**
*/
/*获取元素属性值的函数*/
function getStyle(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}
else
{
iCur=parseInt(getStyle(obj,attr));
}
var iSpeed=(iTarget-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur==iTarget)
{
clearInterval(obj.timer);
}
else
{
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
},30);
}