vcxiaohan2 2015-08-09 01:11 采纳率: 0%
浏览 1586
已结题

js匀速运动框架,多属性运动,如何让每个属性都到达目标值?

我想用onoff=true判断,可是,写好后,效果不好,还是只要有一个属性到达目标值,timer就会停止?
请前辈帮看下用onoff=true部分的代码,麻烦帮解决下这个问题?谢谢
<!doctype html>







Demo

<br> *{margin:0;padding:0;}<br> html,body{width:100%;height:100%;}<br> #div1{width:100px;height:100px;background:#6633cc;position:absolute;left:200px;top:0;}<br>


</div>
<script>
    window.onload=function(){
        addPic();
    }
    function addPic(){
        var div1=document.getElementById("div1");
        //调用运动框架
        uniformMove(div1,{width:200,height:300},5);//多属性运动
    }
    function uniformMove(obj,json,iSpeed,fn){
        var timer=null;
        var num=-iSpeed;
        var iCur=0;
        var iTarget=0;
        var onoff=true;//判断每个属性是否到达目标
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            for(var attr in json){
                iTarget=json[attr];
                iCur=getStyle(obj,attr);
                if(iCur<iTarget){
                    if(Math.abs(iCur-iTarget)<iSpeed){
                        iSpeed=Math.abs(iCur-iTarget);
                    }
                }else{
                    if(Math.abs(iCur-iTarget)<Math.abs(iSpeed)){
                        iSpeed=-Math.abs(iCur-iTarget);
                    }else{
                        iSpeed=num;
                    }
                }
                if(iCur==iTarget){
                    clearInterval(obj.timer);
                    if(fn){
                        fn();
                    }
                }
                else{
                    obj.style[attr]=iCur+iSpeed+"px";
                }
            }
        },15);
    }
    function getStyle(obj,attr){
        return parseFloat(getComputedStyle(obj,null)[attr]);//要用parseFloat
    }
</script>


  • 写回答

1条回答 默认 最新

  • vcxiaohan2 2015-08-11 14:36
    关注

    经过自己的不懈努力,该bug已解决,就是一个右括号的问题

    评论

报告相同问题?

悬赏问题

  • ¥15 如何在scanpy上做差异基因和通路富集?
  • ¥20 关于#硬件工程#的问题,请各位专家解答!
  • ¥15 关于#matlab#的问题:期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707,使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错,维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯:Person is not mapped,如何解決?
  • ¥15 c++头文件不能识别CDialog