这篇博客介绍了如何创建一个JavaScript运动函数startMove，用于实现对象属性如透明度的平滑过渡效果。通过clearInterval确保动画的启动和停止，并通过setInterval控制每帧的变化，以达到平滑运动的效果。在函数中，根据不同的属性类型（如opacity）进行不同的处理，并提供速度调整以达到目标值。最后展示了如何在鼠标悬停事件中调用该函数。
//获取对象的属性
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
}
//运动函数的构造（对象，属性，目标）
function startMove(obj, attr, iTarget)
{
//清除时间间隔
clearInterval(obj.timer);
//清除时间间隔
obj.timer=setInterval(function (){
var cur=0;
//透明度的设置
if(attr=='opacity')
{
cur=Math.round(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);
}
else
{
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
document.getElementByIdx_x_x_x('txt1').value=obj.style.opacity;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
}, 30);
}
调用的方法如下：
oBtnPrev.onmouseover=oMarkLeft.onmouseover=function ()
{
startMove(oBtnPrev, 'opacity', 100);
};
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
