JS實(shí)用的動(dòng)畫彈出層效果實(shí)例

2019-11-20 12:33:12

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了JS實(shí)用的動(dòng)畫彈出層效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>動(dòng)畫彈出層</title><style>.list{position:relative;;background:#eee;border:1px #ccc solid;margin:10px;height:30px;width:100px;cursor :pointer ;}.listShow{position:relative;background:#eff;border:1px #ddd solid;margin:10px;height:30px;width:100px;cursor :pointer ;}.comment{position:absolute;left:0;display:none;position:absolute;border:1px #ccc solid;background:#fee;width:200px;height:200px;overflow:hidden;z-index:100;}</style></head><body><div class="" id="show">0</div><div class="list" id="list1">1<div class="comment" id="comment1">內(nèi)容顯示111<br/></div><div class="list" id="list2">2<div class="comment" id="comment2">內(nèi)容顯示222</div></div><div class="list" id="list3">3<div class="comment" id="comment3">內(nèi)容顯示333</div></div></body></html><script>var zindex=0;function $id(id){return document.getElementById(id);}var Bind = function(object,fun){var args = Array.prototype.slice.call(arguments).slice(2);return function(){return fun.apply(object,args);}}function addEventHandler(oTarget, sEventType, fnHandler){ if(oTarget.addEventListener){oTarget.addEventListener(sEventType, fnHandler, false);}else if(oTarget.attachEvent){oTarget.attachEvent('on' + sEventType, fnHandler);}else{oTarget['on' + sEventType] = fnHandler;}}var Shower=function(){this.list=null;this.comment=null;this.moveLeft=80; this.moveTop=20;this.height=150;this.width=250;this.time=800;this.init=function(lisObj,comObj){this.list=lisObj;this.comment=comObj;var _this=this;this._fnMove=Bind(this,this.move);(function(){var obj=_this;addEventHandler(obj.list,"click",obj._fnMove);})();};this.move=function(){var _this=this;var w=0; var h=0; var height=0; //彈出div的高var width=0; //彈出div的寬var t=0;var startTime = new Date().getTime();//開始執(zhí)行的時(shí)間if(!_this.comment.style.display||_this.comment.style.display=="none"){_this.comment.style.display="block";_this.comment.style.height=0+"px";_this.comment.style.width=0+"px";_this.list.style.zIndex=++zindex;_this.list.className="listShow";var comment=_this.comment.innerHTML; _this.comment.innerHTML=""; //去掉顯示內(nèi)容var timer=setInterval(function(){var newTime = new Date().getTime();var timestamp = newTime - startTime;_this.comment.style.left=Math.ceil(w)+"px";_this.comment.style.top=Math.ceil(h)+"px";_this.comment.style.height=height+"px";_this.comment.style.width=width+"px";t++;var change=(Math.pow((timestamp/_this.time-1), 3) +1);//根據(jù)運(yùn)行時(shí)間得到基礎(chǔ)變化量w=_this.moveLeft*change;h=_this.moveTop*change;height=_this.height*change;width=_this.width*change;$id("show").innerHTML=w;if(w>_this.moveLeft){clearInterval(timer);_this.comment.style.left=_this.moveLeft+"px";_this.comment.style.top=_this.moveTop+"px"; _this.comment.style.height=_this.height+"px";_this.comment.style.width=_this.width+"px";_this.comment.innerHTML=comment; //回復(fù)顯示內(nèi)容}},1,_this.comment);}else{_this.hidden();}}this.hidden=function(){var _this=this;var flag=1;var hiddenTimer=setInterval(function(){if(flag==1){_this.comment.style.height=parseInt(_this.comment.style.height)-10+"px";}else{_this.comment.style.width=parseInt(_this.comment.style.width)-15+"px";_this.comment.style.left=parseInt(_this.comment.style.left)+5+"px";}if(flag==1 && parseInt(_this.comment.style.height)<10){flag=-flag;}if(parseInt(_this.comment.style.width)<20){clearInterval(hiddenTimer);_this.comment.style.left="0px";_this.comment.style.top="0px";_this.comment.style.height="0px";_this.comment.style.width="0px";_this.comment.style.display="none";if(_this.list.style.zIndex==zindex){zindex--;};_this.list.style.zIndex=0;_this.list.className="list";}},1)}}window.onload=function(){//建立各個(gè)菜單對(duì)象var shower1=new Shower();shower1.init($id("list1"),$id("comment1"));var shower2=new Shower();shower2.init($id("list2"),$id("comment2"));var shower3=new Shower();shower3.init($id("list3"),$id("comment3"));}</script>

效果如下圖所示：