js放大镜放大图片效果_图象特效

来源：乌哈旅游

<html><head><title>脚本之家 js图片放大镜</title> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
 body { 
 background: #222; 
 overflow: hidden; 
 left: 0; 
 top: 0; 
 width: 100%; 
 height: 100%; 
 margin: 0; 
 padding: 0; 
 } 
 #screen span { 
 position:absolute; 
 overflow:hidden; 
 border:#FFF solid 1px; 
 background:#FFF; 
 } 
 #screen img{ 
 position:absolute; 
 left:-32px; 
 top:-32px; 
 cursor: pointer; 
 } 
 #caption, #title{ 
 color: #FFF; 
 font-family: georgia, 'times new roman', times, veronica, serif; 
 font-size: 1em; 
 text-align: center; 
 } 
 #caption b { 
 font-size: 2em; 
 }

</style>

this.click = function() 
 { 
 with(this) 
 { 
 img_center(o); 
 /* zooming logic */ 
 if ( ! mv || cl) 
 { 
 if (s > 0) 
 { 
 if (cl || Math.abs(xm - xb) > Sx * .4 || Math.abs(ym - yb) > Sy * .4) 
 { 
 s = - 2; 
 mv = true; 
 zoom(); 
 cap.innerHTML = txt; 
 } 
 } 
 else 
 { 
 if (cl || ob != o) 
 { 
 if (ob >= 0) 
 { 
 with(obj[ob]) 
 { 
 s = - 2; 
 mv = true; 
 zoom(); 
 } 
 } 
 ob = o; 
 s = 1; 
 xb = xm; 
 yb = ym; 
 mv = true; 
 zoom(); 
 cap.innerHTML = txt; 
 } 
 } 
 } 
 } 
 } 
 
 /* hook up events */ 
 img[o].onmouseover = img[o].onmousemove = img[o].onmouseout = new Function("cl=false;obj[" + o + "].click()"); 
 img[o].onclick = new Function("cl=true;obj[" + o + "].click()"); 
 img[o].onload = new Function("img_center(" + o + ")");

/* initial display */ 
 this.zoom(); 
}

/* mouse */ 
document.onmousemove = function(e) 
{ 
 if ( ! e) 
 { 
 e = window.event; 
 } 
 xm = (e.x || e.clientX); 
 ym = (e.y || e.clientY); 
}

/* init */ 
function load() 
{ 
 /* html elements */ 
 scr = document.getElementById("screen"); 
 spa = scr.getElementsByTagName("span"); 
 img = scr.getElementsByTagName("img"); 
 cap = document.getElementById("caption"); 
 
 /* mouseover border */ 
 document.getElementById("border").onmouseover = function() 
 { 
 cl = true; 
 if(ob >= 0 && obj[ob].s > 0) obj[ob].click(); 
 ob = -1; 
 }

/* global variables */ 
 W = parseInt(scr.style.width); 
 H = parseInt(scr.style.height); 
 M = W / Mg; 
 Sx = (W - (Nx - 1) * M) / Nx; 
 Sy = (H - (Ny - 1) * M) / Ny; 
 Wi = Tx * Sx + (Tx - 1) * M; 
 Hi = Ty * Sy + (Ty - 1) * M; 
 SP = M * Tx * SP; 
 wi = (Wi - Sx) / SP; 
 hi = (Hi - Sy) / SP; 
 
 /* create objects */ 
 for (k = 0, i = 0; i < Nx; i ++) 
 { 
 for (j = 0; j < Ny; j ++) 
 { 
 obj[k] = new Cobj(k ++, i, j); 
 } 
 } 
} 
//--> 
</ script></head><body>

<img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192147592.jpg" alt=""> 
 <img style="left: -11px; top: -8px;" src="http://files.jb51.net/upload/20080504192148526.jpg" alt=""> 
 <img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192151907.jpg" alt=""> 
 <img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192153429.jpg" alt=""> 
 <img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192154128.jpg" alt=""> 
 <img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192154190.jpg" alt=""> 
 <img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192154345.jpg" alt=""> 
 <img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192155839.jpg" alt=""> 
 <img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192156858.jpg" alt=""> 
 <img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192156118.jpg" alt=""> 
 <img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192157749.jpg" alt=""> 
 <img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192158181.jpg" alt=""> 
 <img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192158115.jpg" alt=""> 
 <img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192159820.jpg" alt=""> 
 <img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192201596.jpg" alt=""> 
 <img style="left: -11px; top: -9px;" src="http://files.jb51.net/upload/20080504192201700.jpg" alt=""> 
 
 <b>carefully</b> weight the options

</body></html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]