JS practical animation pop-up Layer Effect instance _ javascript tips-js tutorial

This article mainly introduces the practical animation pop-up layer effects of javascript. examples show how javascript achieves the animation pop-up layer, which is of great practical value, you can refer to the examples in this article to describe how to use the JS practical animation pop-up layer effects. Share it with you for your reference. The specific implementation method is as follows:

 Animation pop-up layer
0
1
Content display 111
2
Content display 222
3
Content display 333
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. attachE Vent ('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; // The High var width = 0 of p is displayed; // The p width var t = 0; var startTime = new Date () is displayed (). getTime (); // The execution start time 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); // get the basic change according to the running time 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 display 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 each menu object 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

Shows the effect:

I hope this article will help you design javascript programs.