JS简单实现动画弹出层效果
JS简单实现动画弹出层效果
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>动画弹出层</title> <style> .list{ position:relative;; background:#eee; border:1px#cccsolid; margin:10px; height:30px; width:100px; cursor:pointer; } .listShow{ position:relative; background:#eff; border:1px#dddsolid; margin:10px; height:30px; width:100px; cursor:pointer; } .comment{ position:absolute; left:0; display:none; position:absolute; border:1px#cccsolid; background:#fee; width:200px; height:200px; overflow:hidden; z-index:100; } </style> </head> <body> <divclass=""id="show"> 0 </div> <divclass="list"id="list1">1 <divclass="comment"id="comment1">内容显示111<br/> </div> <divclass="list"id="list2">2 <divclass="comment"id="comment2">内容显示222</div> </div> <divclass="list"id="list3">3 <divclass="comment"id="comment3">内容显示333</div> </div> </body> </html> <script> varzindex=0; function$id(id){ returndocument.getElementById(id); } varBind=function(object,fun){ varargs=Array.prototype.slice.call(arguments).slice(2); returnfunction(){ returnfun.apply(object,args); } } functionaddEventHandler(oTarget,sEventType,fnHandler){ if(oTarget.addEventListener){oTarget.addEventListener(sEventType,fnHandler,false);} elseif(oTarget.attachEvent){oTarget.attachEvent('on'+sEventType,fnHandler);} else{oTarget['on'+sEventType]=fnHandler;} } varShower=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(){ varobj=_this; addEventHandler(obj.list,"click",obj._fnMove); })(); }; this.move=function(){ var_this=this; varw=0; varh=0; varheight=0;//弹出div的高 varwidth=0;//弹出div的宽 vart=0; varstartTime=newDate().getTime();//开始执行的时间 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"; varcomment=_this.comment.innerHTML; _this.comment.innerHTML="";//去掉显示内容 vartimer=setInterval(function(){ varnewTime=newDate().getTime(); vartimestamp=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++; varchange=(Math.pow((timestamp/_this.time-1),3)+1);//根据运行时间得到基础变化量 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;//回复显示内容 } },1,_this.comment); }else{ _this.hidden(); } } this.hidden=function(){ var_this=this; varflag=1; varhiddenTimer=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(){ //建立各个菜单对象 varshower1=newShower(); shower1.init($id("list1"),$id("comment1")); varshower2=newShower(); shower2.init($id("list2"),$id("comment2")); varshower3=newShower(); shower3.init($id("list3"),$id("comment3")); } </script>
以上所述就是本文的全部内容了,希望大家能够喜欢。