js放大镜放大图片成效 详细出处参考：http://www.jb51.net/article/14335.htm
日期：2014-05-16 浏览次数：20451 次
js放大镜放大图片效果 详细出处参考：http://www.jb51.net/article/14335.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>
<script type="text/javascript"><!--
window.onerror = new Function("return true");
var obj = [];
var scr;
var spa;
var img;
var W;
var Wi;
var Hi;
var wi;
var hi;
var Sx;
var Sy;
var M;
var xm;
var ym;
var xb = 0;
var yb = 0;
var ob = - 1;
var cl = false;
/* needed in standard mode */
px = function(x)
{
return Math.round(x) + "px";
}
/* center image - do not resize for perf. reason */
img_center = function(o)
{
with(img[o])
{
style.left = px( - (width - Wi) / 2);
style.top = px( - (height - Hi) / 2);
}
}
//////////////////////////////////////////////////////////
var Nx = 4; //size grid x
var Ny = 4; //size grid y
var Tx = 3; // image width
var Ty = 3; // image height
var Mg = 40; // margin
var SP = 1; // speed
//////////////////////////////////////////////////////////
function Cobj(o, x, y)
{
this.o = o;
this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2))));
this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2))));
this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP;
this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP;
this.l = 0;
this.t = 0;
this.w = 0;
this.h = 0;
this.s = 0;
this.mv = false;
this.spa = spa[o].style;
this.img = img[o];
this.txt = img[o].alt;
img[o].alt = "";
/* zooming loop */
this.zoom = function()
{
with(this)
{
l += li * s;
t += ti * s;
w += wi * s;
h += hi * s;
if ((s > 0 && w < Wi) || (s < 0 && w > Sx))
{
/* force window.event */
window.focus();
/* loop */
setTimeout("obj[" + o + "].zoom()", 16);
}
else
{
/* finished */
mv = false;
/* set final position */
if (s > 0)
{
l = ix * M + ix * Sx;
t = iy * M + iy * Sy;
w = Wi;
h = Hi;
}
else
{
l = x * M + x * Sx;
t = y * M + y * Sy;
w = Sx;
h = Sy;
}
}
/* html animation */
with(spa)
{
left = px(l);
top = px(t);
width = px(w);
height = px(h);
zIndex = Math.round(w);
}
}
}
this.click = function()
{
with(this)
{
img_center(o);
/* zooming logic */
if ( ! mv || cl)
{
if (s > 0)
{
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
