Javascript之链式运动框架1

第一部分：HTML内容：

<script src="6-1.js"></script>    <script>        window.οnlοad=function(){            var oDiv=document.getElementById('div');            var timer=null;            oDiv.οnclick=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函数。

转载于:https://www.cnblogs.com/beyrl-blog/p/6024964.html

Javascript之链式运动框架1相关推荐

Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
（43）JS运动之链式运动框架
链式运动框架就是一系列的运动分阶段进行,在普通的运动框架上加上一个参数function,这个function表示下一个要执行的动作,具体代码如下: <!DOCTYPE HTML> < ...
好程序员技术教程分享JavaScript运动框架
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...
JavaScriptDay08:js运动基础，单物体运动框架，多物体运动框架，改变单一任意值运动框架，改变多值运动框架，完美运动框架
目录 0x00 js的运动基础 0x01 单物体运动框架 0x02 多物体运动框架 0x03 改变单一任意值运动框架 0x04 链式运动框架 0x05 改变多值运动框架 0x06 完美运动框架 0x0 ...
javascript从入门到跑路-----小文的js学习笔记（25）------运动框架----匀速运动、缓冲运动、多物体运动、链式运动
** javascript从入门到跑路-----小文的js学习笔记(1)---------script.alert.document.write() 和 console.log 标签 javascri ...
【原生JS组件】javascript 运动框架
大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...
JavaScript——创建运动框架
封装好的运动框架Move(obj,attr,iTarget),可直接调用: 可用于设置width.border.fontSize.marginLeft.opacity等许多常见属性值的变速变化,实现各 ...
B站JavaScript从入门到精通Blue石川老师视频部分代码_运动升级_链式运动_土豆网
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
javascript运动框架（三）
迟到了好几天,不好意思哈! 继续来优化一下javascript运动框架的代码. 之前的代码存在bug,当重复点击时速度会加快,那么怎么解决这个bug呢? 现在我们就来解决一下, 其实很简单, 在开始运 ...

Javascript之链式运动框架1

Javascript之链式运动框架1相关推荐

最新文章

热门文章