Tip: you can modify some code before running
<!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><head><title>Explicit/hidden dialog box</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css"># Show {margin: 10px ;}. 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: # border; width: 200px; height: 200px; overflow: hidden; z-index: 100 ;}</style></head><body><!--把下面代码加到<body>与</body>之间--><div class="" id="show">0</div><div class="list" id="list1">1<div class="comment" id="comment1">Aaaaaaaaaaaaffffffffff<br>Ddddddddddddddd<br>Ddddddddddddd<br>Dddddddddd<br>Aaaaa</div></div><div class="list" id="list2">2<div class="comment" id="comment2">Aaaaaaaaaaaaaaaaa</div></div><div class="list" id="list3">3<div class="comment" id="comment3">Aaaaaaaaaaaaaaaaa</div></div><div class="list" id="list4">4<div class="comment" id="comment4">Aaaaaaaaaaaaaaaaa</div></div><div class="list" id="list5">5<div class="comment" id="comment5">Aaaaaaaaaaaaaaaaa</div></div><div class="list" id="list6">6<div class="comment" id="comment6">Aaaaaaaaaaaaaaaaa</div></div><script language="javascript">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 ('o N' + sEventType, fnHandler);} else {oTarget ['on' + sEventType] = fnHandler;} var Shower = function () {this. list = null; this. comment = null; this. moveLeft = 80; // The horizontal offset of the displayed div from this. moveTop = 20; // The vertical offset of the displayed div from this. height = 150; // The height of the displayed div. this. width = 250; // The width of the displayed div. this. time = 800; // the time used to pop up the div. this. init = function (lisObj, comObj) {this. list = lisObj; this. comment = comObj; var _ this = this; this. _ fnMove = Bind (this, this. move); (function () {v Ar obj = _ this; addEventHandler (obj. list, "click", obj. _ fnMove) ;}) () ;}; this. move = function () {var _ this = this; var w = 0; // horizontal offset var h = 0; // Vertical offset var height = 0; // The height var width = 0 of the displayed div; // The width var t = 0 of the displayed div; var startTime = new Date (). 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"); var shower4 = new Shower (); shower4.init ($ id ("list4 "), $ id ("comment4"); var shower5 = new Shower (); shower5.init ($ id ("list5"), $ id ("comment5 ")); var shower6 = new Shower (); shower6.init ($ id ("list6"), $ id ("comment6 "));}</script></body></html>
Tip: you can modify some code before running
