JS實用的動畫彈出層效果實例
編輯：JavaScript綜合知識
本文實例講述了JS實用的動畫彈出層效果的方法。分享給大家供大家參考。具體實現方法如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 <!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>效果如下圖所示：
- 上一頁:js日期范圍初始化得到前一個月日期的方法
- 下一頁:JS判斷字符串包含的方法
小編推薦
熱門推薦