javascript - js运动框架问题求助
高洛峰
高洛峰 2017-04-11 10:07:52
[JavaScript讨论组]
function getStyle(obj,attr){
    if(obj.currentStyle)  
    {  
        return obj.currentStyle[attr];  
    }  
    else  
    {  
        return getComputedStyle(obj,false)[attr];  
    }  
}


function startMove(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        for(var attr in json){
            var iCur = 0;
            var flag = true;
            if(attr == 'opacity'){
                iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
                iCur = parseInt(getStyle(obj,attr));
            }

            var speed = (json[attr]-iCur)/8;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);

            if(iCur != json[attr]){
                flag = false;
            }

            if(attr == 'opacity'){
                obj.style.opacity = (iCur + speed)/100;
                obj.style.filter = 'alpha(opactiy:'+(iCur+speed)+')';
            }else{
                obj.style.attr = iCur + speed + 'px';
            }

            if(flag){
                clearInterval(obj.timer);

                if(fn){
                    fn();
                }
            }
        }
    }
        ,30)
}



    
    
    
    
    


    

问一下为什么只修改了opacity的值 没有改变width和height呢?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(6)
PHP中文网

因为你的attr是变量,无法通过obj.style.attr来赋值,要使用obj.style[attr]才行。

PHPz

你把position设置为absolute

天蓬老师
if(attr == 'opacity'){
                obj.style.opacity = (iCur + speed)/100;
                obj.style.filter = 'alpha(opactiy:'+(iCur+speed)+')';
            }else{
                obj.style.attr = iCur + speed + 'px'; //问题大概在这里
            }

正确的写法是obj.style[attr]才对吧。
另外,css3动画那么好用,为毛还要自己费事写这个?

迷茫

用CSS3动画好,很多js运动插件都是优先使用CSS3的特性,不支持CSS3的采用JS去兼容,js动画效果很生硬,例如jQuery

阿神

@sirqiao的obj.style[attr]是正解哦!
关于用CSS3动画还是JS实现,还是看需求和自己手上的技能咯。

伊谢尔伦

obj.style[attr]正解

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号