Tip: You can modify some of the code before running
JavaScript very personalized Picture Show magnification display effect <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> very personalized picture display effect (10) </title> < Meta http-equiv= "Content-type" content= "text/html;charset=gb2312" > <!--Add the following code to <pead> and </pead> Between--> <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 Functi On (' 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;//mar gin 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) {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> </pead> <body> <!--Add the following code to the <body> and </body>--> <div > <div id= "title" ></div> <div id= "border" ></div> <div id= "screen" > <span >& lt;/span> <span ></span> <span ></span> <span ></span> <span ></span> <span ></span> <span ></span> &L T;span ></span> <span ></span> <span ></span> <span ></span> < Span ></span> <span ></span> <span ></span> <span ></span> <sp An ></span> </div> <div id= "caption" ><b>carefully</b> weight the options</div> </div> <script type= "Text/javascript" > <!--//starter load (); --> </script> </body> </ptml>
Tip: You can modify some of the code before running
