JS Practical example of animation pop-up layer effect

The example of this article describes the method of JS practical animation pop-up layer effect. Share to everyone for your reference. The implementation methods are as follows:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148-149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173-174

<! 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> animation pop-up layer </title> <style> list{position:relative; background: #eee; border:1px #ccc Solid; margin:10px; height:30px; width:100px; Cursor:p ointer; listshow{position:relative; background: #eff; border:1px #ddd solid; margin:10px; height:30px; width:100px:p o Inter; 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" > Content display 111<br/> </div> <div class= "list" id= "List2" >2 <div class= "comment" id= "Comment2" > Content display 222</div> </div> <div class= "list" id= "List3" >3 <div class= "comment" id= " Comment3 "> Content show 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] = FnH Andler;} 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;//Popup Div high var width=0;//Popup Div's wide var t=0; var Startt IME = new Date (). GetTime ()//Time to start 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= ""; Remove the display content 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); According to the running time, the basic change quantity is 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; Reply to show content}},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 () {//Create individual menu objects 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>

The effect is shown in the following illustration: