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>
以上所述就是本文的全部内容了，希望大家能够喜欢。