javascript双向放大缩小广告代码

更新时间：2008年05月12日 22:34:03 作者：

比较罕见的javascript双向放大缩小图片效果代码，鼠标上下移动即可看到效果

<!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 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="/upload/20080512223441429.jpg">     <img title="yellow" src="/upload/20080512223442360.jpg">     <img title="earth" src="/upload/20080512223443364.jpg">     <img title="dream" src="/upload/20080512223443803.jpg">     <img title="flowers" src="/upload/20080512223444700.jpg"> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

图片向上滚动
图片向上滚动...
2006-07-07
推荐一个不错的图片浏览效果
推荐一个不错的图片浏览效果...
2007-06-06
javascript图片自动缩放和垂直居中处理函数
非常不错的应用代码，方便我们处理一些图片效果
2008-10-10
鼠标图片振动代码
鼠标图片振动代码...
2006-07-07
JavaScript 图片放大效果及代码说明
JavaScript 图片放大效果及代码说明 ,想要学习的朋友可以参考下。
2009-10-10
從博客網扣了一個效果出來
從博客網扣了一個效果出來...
2007-05-05
纯JS图片批量预加载技术代码
一款实用的图片预加载技术，真正实现加载完成显示图片，加载过程中显示进度指示，本加载可以批量进行，将成批图片加载完成才显示，使用循环依次载入图片，并将路径暂存在数组中，加载完成后取出数组数据并显示。
2009-11-11
CSS 图片横向排列实现代码
一个CSS布局实例，介绍的是一个横向排列的图片列表，这也是大家在从事网页布局时候最常见的一种布局实例，有必要掌握，本代码已经过了优化，个别细节你需根据你的网站主CSS风格进行调整，才能完美搭配。
2010-03-03
js 加载时自动调整图片大小
又一个javascript自动调整图片大小的脚本
2008-05-05
比较方便的onMouseWheel缩放图片效果
比较方便的onMouseWheel缩放图片效果...
2006-09-09