JS实用的动画弹出层效果实例

2019-11-20 12:33:12

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实用的动画弹出层效果的方法。分享给大家供大家参考。具体实现方法如下：

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>动画弹出层</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></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; //弹出div的高var width=0; //弹出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-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;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(){//建立各个菜单对象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>

效果如下图所示：