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需再刷新一下页面才能执行]

一个简单的javascript图片放大效果代码
javascript图片放大效果多用于小图片产品的展示。
2010-08-08
javascript 图片放大效果函数
图片放大效果实现代码，需要的朋友可以参考下。
2009-11-11
javascript椭圆旋转相册实现代码
支持自动和手动两种模式：自动模式下自动旋转展示，手动模式下通过鼠标选择当前图片，或通过提供的接口选择上一张/下一张图片
2012-01-01
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。...
2007-03-03
javascript 图片滑动切换代码
nVida网站的图片滑动特效，这里为了快速演示效果，去掉了原有的图片用数字来代替，你完全可以插入你想要的图片，本特效使用JS实现，用CSS配合固定图片，以滑动的方式切换相应的多张图片。
2010-03-03
推荐一个不错的图片浏览效果
推荐一个不错的图片浏览效果...
2007-06-06
DOM Scripting中的图片切换[兼容Firefox]
dom scripting确实是一本对javascript dom编程很有指导意义的书，今天看了书中一个简单的图片切换实例，感觉很有意思。
2010-06-06
图片自动缩小点击放大
如果不支持网页对话框就再新窗口打开
2008-07-07
来自ImageSee官方 JavaScript图片浏览器
2008-01-01
奇妙的Javascript图片放大镜
奇妙的Javascript图片放大镜...
2006-07-07