您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

JavaScript 创建运动框架的实现代码_基础知识

2025/12/3 20:07:47发布46次查看
封装好的运动框架move(obj,attr,itarget),可直接调用:
可用于设置width、border、fontsize、marginleft、opacity等许多常见属性值的变速变化,实现各种有趣效果。
兼容ie和ff。
复制代码 代码如下:
/****************
    *
    *   ie-bug:
    *   在ie中,设置opacity属性时,元素样式中需要设置opacity属性,才能读取到opacity值。
    *
    *   obj:元素对象。   attr:用引号包围的属性名。   itarget:属性目标值。
    *
    *****************/
    function move(obj,attr,itarget){
        clearinterval(obj.timer);//关闭前一个定时器,解决对同个对象同时调用多个move()时,定时器叠加问题。使用obj.timer给每个调用move()的对象赋予各自的定时器,防止多个对象同时调用move()时,同用一个定时器,而导致相关干扰问题。
        obj.timer=setinterval(function(){
            var cur=0;//创建一个变量,用于存储 attr属性每时每刻的值
            if(attr==opacity){
            //针对在ff中opacity属性值为浮点数值问题,将属性值 四舍五入、转换成浮点型。乘以100,使opacity属性值与ie统一为百分数
                cur=math.round(parsefloat(getstyle(obj,attr))*100);
            }else{
                cur=parseint(getstyle(obj,attr));//将除opacity外的属性(width/fontsize/marginleft等)的初始值 转换为整型
            }
            var speed=(itarget-cur)/10;//创建 递减的速度speed变量。实现属性值的变速改变
            speed=speed>0?math.ceil(speed):math.floor(speed);//取整,解决浏览器忽略小于1px的数值 导致运动结束时,离目标值itarget少几个像素的问题
            if(itarget==cur){//当目标值等于目标值时,结束定时器
                clearinterval(obj.timer);
            }else{
                    cur+=speed;//当前值cur 加上 递减的速度值speed
                if(attr==opacity){
                    // 分别对ie和ff设置opacity属性值
                    obj.style.filter=alpha(opacity:+cur+); //for ie
                    obj.style.opacity=cur/100;   //for ff
                }else{
                    obj.style[attr]=cur+px; //给指定属性attr 添加值cur+speed
                }
            }
        },30);
    }
    //getstyle()函数 用于兼容ie和ff:获取 对象的 非行间样式中的属性的值。 obj:元素对象。 name:属性名。
    function getstyle(obj,name){
        if(obj.currentstyle){
            return obj.currentstyle[name];//for ie
        }else{
            return getcomputedstyle(obj,false)[name];//for ff
        }
    }
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product