<meta content="no" http-equiv="imagetoolbar" /><style type="text/css"> body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;} img {position:absolute;left:-10000;} .spd {border:#000 solid 1px;overflow:hidden;z-index:0;font-size:1px;position:absolute;}</style><script type="text/javascript"><!-- ///////////// var NX = 9; var NY = 7; ///////////// var IM = 0; var ix = 0; var ih = 0; var nx = 0; var ny = 0; var Nx = 0; var Ny = 0; var C = 0; var xm = 0; var ym = 0; var ion = new Array(); for(var i=0;i<NX;i++)ion[i] = new Array(); function CObj(x,y){ this.obj = document.createElement("span"); this.obj.className = "spd"; this.img = document.createElement("img"); this.img.src = IM.src; this.obj.appendChild(this.img); document.getElementById("SPAN").appendChild(this.obj); this.xc = x/NX; this.yc = y/NY; this.x = x; this.y = y; this.L = 0; this.T = 0; this.K = 0; this.Z = Nx; this.SI = 0; this.click = function (){ with (this) { Z=Nx; if(K>20)K=0; if(SI==0){ SI=1; ion[x][y].clock(); } } } this.clock = function (){ with (this) { M = Math.round(Nx - Z * Math.sin(K * .1)); H = Math.round(M * Ny / Nx); K++; with(obj.style){ left = Nx * .5 + L - M * .5-(iw*.5); top = Ny * .5 + T - H * .5-(ih*.5); width = M + 1; height = H + 1; zIndex = Math.round(10000 - (Z*10)+x); } with(img.style){ left = -L+M*xc-Nx*xc; top = -T+H*yc-Ny*yc; } if(K==7){ if(x<NX-1)ion[x+1][y].click(); if(x>0)ion[x-1][y].click(); if(y<NY-1)ion[x][y+1].click(); if(y>0)ion[x][y-1].click(); } if(K==10){ if(x>0&&y>0)ion[x-1][y-1].click(); if(x<NX-1&&y<NY-1)ion[x+1][y+1].click(); if(x>0&&y<NY-1)ion[x-1][y+1].click(); if(x<NX-1&&y>0)ion[x+1][y-1].click(); } if(Z<=0){ SI = 0; Z = Nx; K = 0; } else { Z-=.25; setTimeout("ion["+x+"]["+y+"].clock()",16); } } } this.DOOT = function (){ with(this){ L = Math.round(x*Nx); T = Math.round(y*Ny); with(obj.style){ left = Math.round((-iw*.5)+L); top = Math.round((-ih*.5)+T); width = Math.round(Nx + 1); height = Math.round(Ny + 1); } with(img.style){ left = -L; top = -T; } } } } document.onclick = function(){ x = Math.ceil(((xm-(nx*.5)+(iw*.5))/Nx))-1; y = Math.ceil(((ym-(ny*.5)+(ih*.5))/Ny))-1; if(x>=0&&x<NX&&y>=0&&y<NY){ ion[x][y].Z=Nx; ion[x][y].click(); } } function resize(){ nx = document.body.clientWidth; ny = document.body.clientHeight; } onresize = resize; document.onmousemove = function(e){ if (window.event) e = window.event; xm = (e.x || e.clientX); ym = (e.y || e.clientY); } onload = function() { resize(); IM = document.getElementById("doot"); SP = document.getElementById("SPAN"); iw = IM.width; ih = IM.height; Nx = Math.round(iw / NX); Ny = Math.round(ih / NY); for(var i=0;i<NX;i++){ for(var j=0;j<NY;j++){ ion[i][j] = new CObj(i,j); ion[i][j].DOOT(); } } } //--> </script> <div id="SPAN" style="left: 50%; position: absolute; top: 50%"> </div> <img id="doot" alt="javascript实现的图片点击水波荡漾效果" src="http://www.songlecn.com/wp-content/supload/2009/02/28/11.jpg" />

提示：你可以先修改部分代码再运行。