截图:
源代码:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <title>2</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 id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></div>
- </div>
- <div id="images" style="visibility:hidden">
- <img title="infinite" src="http://preview.zcool.com.cn/code/js/04/2/pil.jpg">
- <img title="yellow" src="http://preview.zcool.com.cn/code/js/04/2/cit.jpg">
- <img title="earth" src="http://preview.zcool.com.cn/code/js/04/2/earth.jpg">
- <img title="dream" src="http://preview.zcool.com.cn/code/js/04/2/draps.jpg">
- <img title="flowers" src="http://preview.zcool.com.cn/code/js/04/2/flo.jpg">
- </div>
- </body>
- </html>
|
|
|
|
|
|
|
