关于多物体运动框架的函数

最新推荐文章于 2025-12-22 19:57:02 发布

原创最新推荐文章于 2025-12-22 19:57:02 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#多物体运动框架 #web前端 #javascript

JS学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在Firefox浏览器中调整元素边框大小的方法。由于Firefox对边框属性的支持较为严格，需要使用特定的属性名如borderLeftWidth。文中提供了一个startMove函数用于实现平滑的边框变化效果。

此方法对于在Firefox中的边框变大变小无法执行。因为在FF中对于边框要求比较严格，需要borderLeftWidth这样的执行，所以执行的时候比较困难。不过一般边框的变化比较少。此方法勉强可用。

function getStyle(obj,name){        
        if(obj.currentStyle){
            return obj.currentStyle[name];
        }else{
            return getComputedStyle(obj,true)[name];//支持ie
        }
    }

function startMove(obj,attr,iTarget){//obj代表着让哪个物体动起来
    clearInterval(obj.timer);   //定时器的关闭一定要在方法的最上面
    obj.timer=setInterval(function(){
        var cur=0;
        if(attr=='opacity'){
             cur=Math.round(parseFloat(getStyle(obj,attr))*100);//opacity本身就是小数，要用parseFloat,否则值直接变成1
        }else{
            cur=parseInt(getStyle(obj,attr));//无法获取非行间样式，所以要重写一个方法
        }       
        var speed=(iTarget-cur)/10;         //缓存变化的速度
        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;
            }else{
                obj.style[attr]=cur+speed+"px";
            }
        }   
    },30);             //30为随机设置的时间，可以更改。
}