javascript雙向放大縮小廣告代碼

2019-11-21 01:45:15

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>雙向放大縮小廣告代碼-武林網</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css">     html {         overflow: hidden;     }     body {         background: #222;         width: 100%;         height: 100%;         cursor: crosshair;     }     .spanSlide {         position: absolute;         background: #000;         font-size: 1px;         overflow: hidden;     }     .imgSlide {         position: absolute;         left: 5%;         top: 5%;         width: 90%;         height: 90%;         overflow: hidden;     }     .txtSlide {         position: absolute;         top: 5%;         left: 50px;         width:100%;         color:#FFF;         font-family: arial, helvetica, verdana, sans-serif;         font-weight: bold;         font-size:96px;         letter-spacing:12px;         filter: alpha(opacity=70);         -moz-opacity:0.7;         opacity:0.7;     } </style> <script type="text/javascript"> var ym=0; var ny=0; createElement = function(container, type, param){     o=document.createElement(type);     for(var i in param)o[i]=param[i];     container.appendChild(o);     return o; } mooz = {     O:[],     /////////     mult:6,     nbI:5,     /////////     rwh:0,     imgsrc:0,     W:0,     H:0,     Xoom:function(N){         this.o = createElement(document.getElementById("screen"), "span", {             'className':'spanSlide'         });         img = createElement(this.o, "img", {             'className':"imgSlide",             'src':mooz.imgsrc[N%mooz.imgsrc.length].src         });         spa = createElement(this.o, "span", {             'className':"imgSlide"         });         txt = createElement(spa, "span", {             'className':"txtSlide",             'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title         });         this.N = 10000+N;     },     mainloop:function(){         with(this){             for(i=0; i<mooz.nbI; i++) {                 O[i].N += (ym-ny)/8000;                 N = O[i].N%nbI;                 ti = Math.pow(mult,N);                 with(O[i].o.style){                     left   = Math.round((W-(ti*rwh))/(W+ti)*(W*.5)) +"px";                     top    = Math.round((H-ti)/(H+ti)*(H*.5))+"px";                     zIndex = Math.round(10000-ti*.1);                     width  = Math.round(ti*rwh)+"px";                     height = Math.round(ti)+"px";                 }             }         }         setTimeout("mooz.mainloop();", 16);     },     oigres:function(){         with(this){             W = parseInt(document.getElementById("screen").style.width);             H = parseInt(document.getElementById("screen").style.height);             imgsrc = document.getElementById("images").getElementsByTagName ("img");             rwh = imgsrc[0].width/imgsrc[0].height;             for(var i=0;i<nbI;i++) O[i] = new Xoom(i);             mainloop();         }     } } document.onmousemove = function(e){     if(window.event) e=window.event;     ym = (e.y || e.clientY);     if(ym/2>ny)ny=ym/2; } window.onload = function(){     ym = ny+50;     mooz.oigres(); } </script> </head> <body> <div style="position:absolute;left:50%;top:50%">     <div style="position:absolute;width:720px;height:560px;left:-360px;top:- 280px;background:#fff"></div>     <div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font -size:0.9em">Loading...</div>     <div   class="iwvjtn8m0"   id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top: -240px;overflow:hidden"></div> </div> <div   class="iwvjtn8m0"   id="images" style="visibility:hidden">     <img title="infinite" src="http://files.VeVB.COm/upload/20080512223441429.jpg">     <img title="yellow" src="http://files.VeVB.COm/upload/20080512223442360.jpg">     <img title="earth" src="http://files.VeVB.COm/upload/20080512223443364.jpg">     <img title="dream" src="http://files.VeVB.COm/upload/20080512223443803.jpg">     <img title="flowers" src="http://files.VeVB.COm/upload/20080512223444700.jpg"> </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：javascript用層模擬可移動的小窗口

下一篇：引用文章鏈接代碼復制自動加鏈接功能