首页 > 代码库 > JS运动缓冲的封装函数
JS运动缓冲的封装函数
之前经常写运动函数,要写好多好多,后来想办法封装起来。(运动缓冲)。
1 /* 2 物体多属性同时运动的函数 3 obj:运动的物体 4 oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值 5 ratio:速度的系数 6 */ 7 function bufferMove(obj, oTarget, fn,ratio = 8) { 8 clearInterval(obj.iTimer); 9 obj.iTimer = setInterval(function () { 10 // 此处设定开关bBtn,假设所有的属性均已运动完毕true 11 var bBtn = true; 12 for(var sAttr in oTarget){ 13 // 获取当前值,此处兼容透明度的变化 14 if(sAttr === ‘opacity‘) { 15 var iCur = parseFloat(getStyle(obj, sAttr) * 100); 16 } else { 17 var iCur = parseInt(getStyle(obj, sAttr)); 18 } 19 // 计算速度,此处可判定方向,如向左或向右,先透明后出现或先出现后透明等 20 var iSpeed = (oTarget[sAttr] - iCur) / ratio; 21 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); 22 23 // 计算下一次的值 24 var iNext = iCur + iSpeed; 25 26 // 赋值给对应样式 27 if(sAttr ===‘opacity‘) { 28 obj.style.opacity = iNext / 100; 29 obj.style.filter = ‘alpha(opacity=‘ + iNext +‘)‘; 30 } else { 31 obj.style[sAttr] = iNext + ‘px‘; 32 } 33 34 // 清除定时器,当前的位置和终点值是否相等,相等则说明结束 35 if(iNext !== oTarget[sAttr]) { 36 bBtn = false; 37 } 38 } 39 // 如果bBtn的值为true,则说明所有的属性均已运动完毕,回调函数fn() 40 if(bBtn) { 41 clearInterval(obj.iTimer); 42 if(fn){ 43 fn(); 44 } 45 } 46 }, 50); 47 }
以上封装函数也可以用于单个属性,多样式运动,比如:
bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);
就这样。
JS运动缓冲的封装函数
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。