<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<Title>动画d出层</Title>
<style>
.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:#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">内容显示111<br/>
</div>
<div class="List" ID="List2">2
<div class="comment" ID="comment2">内容显示222</div>
</div>
<div class="List" ID="List3">3
<div class="comment" ID="comment3">内容显示333</div>
</div>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></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] = 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; //d出div的高
var wIDth=0; //d出div的宽
var t=0;
var startTime = new Date().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";
var comment=_this.comment.INNERHTML;
_this.comment.INNERHTML=""; //去掉显示内容
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⑴),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;
var flag=1;
var hIDdenTimer=setInterval(function(){
if(flag==1){
_this.comment.style.height=parseInt(_this.comment.style.height)⑴0+"px";
}else{ _this.comment.style.wIDth=parseInt(_this.comment.style.wIDth)⑴5+"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(){
//建立各个菜单对象
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> 总结
以上是内存溢出为你收集整理的奉献一个实用的JS动画d出层效果全部内容，希望文章能够帮你解决奉献一个实用的JS动画d出层效果所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）