JS实现运动缓冲效果的封装函数示例
本文实例讲述了JS实现运动缓冲效果的封装函数。分享给大家供大家参考,具体如下:
之前经常写运动函数,要写好多好多,后来想办法封装起来。(运动缓冲)。
/* 物体多属性同时运动的函数 obj:运动的物体 oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值 ratio:速度的系数 */ functionbufferMove(obj,oTarget,fn,ratio=8){ clearInterval(obj.iTimer); obj.iTimer=setInterval(function(){ //此处设定开关bBtn,假设所有的属性均已运动完毕true varbBtn=true; for(varsAttrinoTarget){ //获取当前值,此处兼容透明度的变化 if(sAttr==='opacity'){ variCur=parseFloat(getStyle(obj,sAttr)*100); }else{ variCur=parseInt(getStyle(obj,sAttr)); } //计算速度,此处可判定方向,如向左或向右,先透明后出现或先出现后透明等 variSpeed=(oTarget[sAttr]-iCur)/ratio; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //计算下一次的值 variNext=iCur+iSpeed; //赋值给对应样式 if(sAttr==='opacity'){ obj.style.opacity=iNext/100; obj.style.filter='alpha(opacity='+iNext+')'; }else{ obj.style[sAttr]=iNext+'px'; } //清除定时器,当前的位置和终点值是否相等,相等则说明结束 if(iNext!==oTarget[sAttr]){ bBtn=false; } } //如果bBtn的值为true,则说明所有的属性均已运动完毕,回调函数fn() if(bBtn){ clearInterval(obj.iTimer); if(fn){ fn(); } } },50); }
以上封装函数也可以用于单个属性,多样式运动,比如:
bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);
就这样。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。