DOM加强特效篇之关机动画

本文主要是介绍DOM加强特效篇之关机动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

      这个系类主要是给大家介绍一些基本的JS函数封装和DOM基本特效的使用，第一个介绍的是关机动画

，首先我们先封装一个缓动动画的函数；

function animate(element,json,fn) {clearInterval(element.setId);element.setId=setInterval(function () {var flag=true;//假设当前位置和目标位置一致了for(var attr in json){if(attr=="opacity"){//透明度//opacity:0,0.1,0.2,0.3------1var current=getStyle(element,attr)*100||0;var target=json[attr]*100;var step=(target-current)/10;//如果是目标小于当前,step的值是负数step=step>0?Math.ceil(step):Math.floor(step);current+=step;element.style[attr]=current/100;}else if(attr=="zIndex"){//层级判断element.style[attr]=json[attr];}else{//正常的属性var current=parseInt(getStyle(element,attr))||0;var target=json[attr];var step=(target-current)/10;//如果是目标小于当前,step的值是负数step=step>0?Math.ceil(step):Math.floor(step);current+=step;element.style[attr]=current+"px";}if(current!=target){flag=false;}// end if}// end forif(flag){//如果当前位置和目标位置一致则清理计时器clearInterval(element.setId);if(fn){//证明用户传入了一个函数fn();}// end if}// end ifconsole.log("current:"+current+",target:"+target+",step:"+step+",attr:"+attr+"属性的值:"+json[attr]);},20);
}

还有HTML的代码

<div class="box" id="box"><span id="closeButton"></span><div class="hd" id="headPart"><img src="images/t.jpg" alt=""/></div><div class="bd" id="bottomPart"><img src="images/b.jpg" alt=""/></div>
</div>

我们是关闭 closeButton，接下来就是让下面的层隐藏，然后是最大层隐藏

    my$("closeButton").οnclick=function(){animate(my$("bottomPart"),{"height":0},function(){animate(my$("box"),{"width":0});});};

这篇关于DOM加强特效篇之关机动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---