javascript运动框架

最新推荐文章于 2024-05-17 11:33:12 发布

转载最新推荐文章于 2024-05-17 11:33:12 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wgj32/p/5700368.html

文章标签：

#json #javascript #ViewUI

本文介绍了一个简单的运动框架实现，用于平滑地改变DOM元素的样式属性，并提供了一个通用的样式获取及设置方法，兼容IE与现代浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//运动框架
function sportFrame(obj,json,fun){
    var timer;
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var Stop=true;
        for(var name in json){
            var val=0;
            //判断是不是透明度
            if(name=='opacity'){
                val=Math.round(parseFloat(cssStyle(obj,name))*100);
            }else{
                val=parseInt(cssStyle(obj,name));
            }
            //缓冲速度
            var speed=(json[name]-val)/10;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(val!=json[name]){
                if(name=="opacity"){
                    obj.style.filter='alpha(opacity：'+val+speed+')';//IE
                    obj.style.opacity=(val+speed)/100;
                }else{
                    cssStyle(obj,name,val+speed+'px');
                }
            }
        }
        //判断是否达到终点
        if(Stop){
            clearInterval(timer);        
            if(fun){
                fun();
            }
        }    
    },30);
}

//获取属性值和设置属性值框架
function cssStyle(obj,prop,value){
    //style只能获取写在html标签中的写在style属性中的值（style=”…”），
    //而无法获取定义在<style type="text/css">里面的属性
    //currentStle,getComputedStyle方法可以获取内联或者外部的样式
    //获取样式
    if(arguments.length==2){
        if(obj.currentStyle){
            return obj.currentStyle[prop];  //IE
        }else{
            return getComputedStyle(obj,false)[prop];  //Fire
        }
    }
    //设置样式
    else{
        if(arguments.length==3){
            obj.style[prop]=value;
        }
    }
}