zoukankan      html  css  js  c++  java
  • Javascript之链式运动框架1

    第一部分:HTML内容:

    <script src="6-1.js"></script>
    <script>
    window.onload=function(){
    var oDiv=document.getElementById('div');
    var timer=null;
    oDiv.onclick=function(){
    move(oDiv,600,3000,'width',function(){
    move(oDiv,600,3000,'left');
    });
    };
    }
    </script>
    </head>
    <body>
    <div id="div"></div>
    </body>

    第二部分:6-1.js内容:
    function getStyle(obj,name){
    if(obj.currentStyle){
    return obj.currentStyle[name];
    }else{
    return getComputedStyle(obj,false)[name]
    }
    }
    function move(obj,iTarget,time,name,fn){
    var timer=null;
    clearInterval(obj.timer);
    var start=parseFloat(getStyle(obj,name));//getstyle传的是带单位的,所以要加parsefloat,并且便于对opacity进行转换。
    var dis=iTarget-start;
    var count=Math.floor(time/30);
    var step=dis/count;
    var n=0;
    obj.timer=setInterval(function(){
    n++;
    var cur = start + n * dis / count;
    if(name=='opacity'){
    obj.style.opacity=cur;
    obj.style.filter = 'alpha(opacity:' + cur * 100 + ')';
    }else{
    obj.style[name]=cur+'px';
    }
    if(n==count){
    clearInterval(obj.timer);
    fn && fn();
    }
    },30)
    }



    因为封装好了框架,所以,在进行类似的代码的编写的时候,可以直接调用move函数。
  • 相关阅读:
    js类数组
    内存中,外部碎片与内部碎片
    检测js随机函数是否随机
    Vue3 父子组件通信
    Promise的几个重要api
    npm知识总结
    vue中使用防抖函数
    absolute元素水平居中
    vue3 使用 data、computed、methods
    空白字符
  • 原文地址:https://www.cnblogs.com/beyrl-blog/p/6024964.html
Copyright © 2011-2022 走看看