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

js 实用的无间断滚动图效果(良好兼容性)
网上有不少图片滚动的效果代码，但大多兼容性不好，或者结构混乱，xhtml，css，js 均没有得到良好的优化。
2010-06-06
用js 让图片在 div或dl里　居中，底部对齐
2008-01-01
用javascript实现旋转图片效果的代码
用javascript实现旋转图片效果的代码...
2007-11-11
js 加载时自动调整图片大小
又一个javascript自动调整图片大小的脚本
2008-05-05
图片友情链接滚动横向,带控制按钮
超不错的图片友情链接滚动特效,横向排列,带控制按钮,这里已经将横向锁定,不能将其修改为竖向的,否则会出错,专一用于横排的图片滚动,也可以不用作友情链接,产品滚动当然也可以哦.
2009-10-10
javascript批量检查当图片不存在时则显示默认图片的代码
批量检查图片地址显示是不是有错误，在ie浏览器中是有当图片不存在时的onerror事件的，下面的代码即是非常不错的应用。
2008-09-09
javascript动态改变img的src属性图片不显示的解决方法
最近写了几句javascript程序代码，涉及到了动态改变图片的效果，结果在ie下显示不出了来，实在是郁闷，上网找寻结果，终于发现了，原来是浏览器的问题。现在将方法贴出来分享。
2010-10-10
js 图片缩放特效代码
非常不错nipic使用的图片缩放实现代码。
2009-05-05
javascript 不间断的图片滚动并可点击
不间断的图片滚动效果实现代码。
2010-01-01
发一个自己用JS写的实用看图工具实现代码
所以决定慢慢来照顾一下博客吧，这里先把眼前就有的一个小东西拿出来和大家分享一下，这是2006年的时候（文本里记下了时间，不然也忘记了）为了自己看网络图片方便而写的。
2008-07-07

javascript双向放大缩小广告代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具