<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Animation Popup 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;
Cursor:p ointer;
}
. 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>
<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 display 333</div>
</div>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
</body>
<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; The high of the popup div
var width=0; The width of the popup div
var t=0;
var startTime = new Date (). GetTime ();//Start Execution 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= ""; Get rid of 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); Base change based on run 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 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>
Dedicate a useful JS animation pop-up layer effect
