Jquery magnifiers are superb.

The code of this magnifier is quite simple and has good results.
Copy codeThe Code is as follows:
<Script>
// QQ: 496928838 slight cooling
$ (Function (){
$ ("# Demo"). enlarge (
{
// Specifies the pattern of the Mouse mask layer.
Shadecolor: "# FFD24D ",
Shadeborder: "# FF8000 ",
Shadeopacity: 0.4,
Cursor: "move ",

// The outer style of the large image
Layerwidth: 480,
Layerheight: 360,
Layerborder: "# DDD ",
Fade: true,

// Large image size
Largewidth: 960,
Largeheight: 720
});
});

</Script>

<A href = "demo.jpg" id = "demo" style = "position: relative; float: left;">


</A>

 

Copy codeThe Code is as follows:
/*
Enlarge for jQuery v1.0
Abel Yao, 2013
*/
(Function (e) {var I = {shadecolor: "# FFD24D", shadeborder: "# FF8000", shadeopacity :. 5, cursor: "move", layerwidth: 400, layerheight: 300, layerborder: "# DDD", fade: true, largewidth: 1280, largeheight: 960 }; var t = function (t) {t = e. extend ({}, I, t); e (this ). each (function () {var I =e(this).css ("position", "relative"); var h = I. children (). first (); var r = {x: h. width ()/t. largewidth, y: h. height ()/t. largeheight}; var o = {shade: {width: t. layerwidth * r. x-2, height: t. layerheight * r. y-2 }}; var a = e ("<div>" ).css ({position: "absolute", left: "0px", top: "0px ", "background-color": t. shadecolor, border: "1px solid" + t. shadeborder, width: o. shade. width, height: o. shade. height, opacity: t. shadeopacity, cursor: t. cursor});. hide (). appendTo (I); var d = e (" I. innerWidth () return c (); if (h <0 | h> I. innerHeight () return c (); t = t-n.x; h = h-n.y; if (t <0) t = 0; if (h <0) h = 0; if (t> l. width) t = l. width; if (h> l.height?h=l.height=a.css ({left: t, top: hsf-++d.css ({left: 0-t/r. x, top: 0-h/r. y })}). mouseenter (g ). mouseleave (c)}; e. fn. extend ({enlarge: t})} (jQuery );

: Http://pan.baidu.com/s/1zilrC