Javascript image enlargement function _ image effects

The image amplification implementation code. For more information, see.

<STYLE type = text/css>/* pre css reset */body, th, td {font-size: 12px; font-family: Tahoma, Helvetica, Arial, '\ 5b8b \ 4f53',' \ 5FAE \ 8F6F \ 96C5 \ 9ed1', sans-serif;} body, th, td, ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, button, textarea, p {margin: 0; padding: 0 ;} fieldset, img {border: none;} a {color: # 3366CC; text-decoration: none; outline: none;} a: hover {color: # FF6600; text-decoration: underline ;} /*************************************** *********************/. test {}. test h3 {margin: 10px auto ;}. test dt {line-height: 25px; margin-top: 5px ;}. groovy {border: solid 1px # 09c ;}</STYLE> demo <DL> <DT> 1. you can also specify a magnification (relative to a small image) for different images (the size of the image must be the same). <PRE> new imageZoom ("img1", {// mul: 6, // specify the magnification onShow: function () {document. title = "show, you are moving on the image. ";}, onHide: function () {document. title = "you mouse move out the image";}, bigImg :".. /images/tong.jpg "// specify the enlarged image path}); </PRE> <DD> <DT> 2. use the same image to set the width or height for the small image. Here we specify: style = "height: 300px;", (lazy mode, ^ o ^, which is also true for the next few) <PRE> new imageZoom ("dd2", {// The first parameter specifies an image or its id (it can also be the container or id of the image, the first child element in the container must be an image) // mul: 3}); </PRE> <DD id = dd2> <DD id = info> <DT> 3. zoom in the image to the specified container <PRE> new imageZoom ("img3", {viewer: "imgshow" // specify the p or its id }) </PRE> <DD> image preview: <DT> 4. show the p of the big image as a specified multiple <PRE> new imageZoom ("img4", {mul: 5, // zoom in 5 times viewerlinoleic: "linoleic ", // specify the display layer style viewerMul: 1.2 // The display layer is 1.2 times the size of a small image }); </PRE> <DD> </DL> click to download the js source code. PS: To avoid exceptions under ff (if the webpage loading under ff is too slow, may not be able to get the image size) it is best to put the code in onload to execute update:, thanks to danica7773, according to its recommendations to add a custom display layer style, show and hide events <SCRIPT src =" http://files.jb51.net/imgby/imageZoom.js?1.1.20 "Type = text/javascript> SCRIPT <SCRIPT type = text/javascript> window. onload = function () {new imageZoom ("img1", {// mul: 6, // specify the magnification onShow: function () {document. title = "show, you are moving on the image. ";}, onHide: function () {document. title = "you mouse move out the image";}, bigImg :" http://www.jb51.net/upload/2009-11/20091115231842870.jpg "// Specify the path to enlarge the image}); new imageZoom (" dd2 ", {// specify an image or its id (it can also be the container or id of the image, the first child element in the container must be an image) // mul: 3}); new imageZoom ("img3", {viewer: "imgshow" // specify the p or its id} to be displayed.) new imageZoom ("img4", {mul: 5, // zoom in 5 times viewerlinoleic: "linoleic ", viewerMul: 1.2 // The display layer is 1.2 times the size of a small image});} SCRIPT
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

ImageZoom. js

The Code is as follows:

/*
* Author: sohighthesky
* Date: 2009-11-14
*/
/*
* Img specifies the image to be enlarged or its id
* Options: see the notes in setOptions in the code.
*/
Var imageZoom = function (img, options ){
This. img = this. g (img );
If (this. img. nodeName! = "IMG "){
If (this. img & this. img. children [0]. nodeName = "IMG") this. img = this. img. children [0];
Else throw Error ("Invalid argument [img]! ");
}
This. setOptions (options );
This. init ();
}
ImageZoom. prototype = {
G: function (id) {return typeof (id) = "string "? Document. getElementById (id): id ;},
AE: function (el, type, call ){
If (el. addEventListener) el. addEventListener (type, call, false );
Else el. attachEvent ("on" + type, call );
},
GetPos: function (o) {// retrieve element coordinates
Var x = 0, y = 0;
Do {x + = o. offsetLeft; y + = o. offsetTop ;}
While (o = o. offsetParent );
Return {'X': x, 'y': y };
},
SetOptions: function (options ){
This. options = {
Mul: 0, // The default value is not to enlarge (the original image size is displayed)
BigImg: null, // specify the enlarged image path (only in proportion to the small image)
Viewer: null, // specify the position to display (it can be a p or its id)
Viewerlinoleic: "", // previewed p class style
ViewerMul: 1, // specify the magnification of the displayed p. The default value is the original size. This parameter is invalid when the viewer is set.
OnShow: function (){},
OnHide: function (){}
};
For (var o in options) {this. options [o] = options [o];}
This. options. bigImg = this. options. bigImg | this. img. src;
},
GetSize: function (o ){
Return {w: o. offsetWidth, h: o. offsetHeight };
},
CreateView: function (){
Var _ is = this. getSize (this. img );
Var d = document;
If (this. options. viewer ){
This. viewer = this. g (this. options. viewer );
This. viewer. style. overflow = "hidden ";
This. viewer. style. position = "relative ";
} Else {
This. viewer = d. createElement ("p ");
This. viewer. className = this. options. viewerlinoleic;
Var pos = this. getPos (this. img );
This.viewer.style.css Text = "display: none; overflow: hidden; position: absolute; top:" + pos. y + "px; left:" + (pos. x + _ is. w + 10) + "px; height:" + _ is. h * this. options. viewerMul + "px; width:" + _ is. w * this. options. viewerMul + "px ";
D. body. appendChild (this. viewer );
}
This. viewimg = d. createElement ("img ");
This.viewimg.style.css Text = "position: relative; left:-33%; top:-33% ;";
This. viewimg. src = this. options. bigImg;
If (this. options. mul) {// sets the magnification.
This. viewimg. style. width = _ is. w * this. options. mul + "px ";
This. viewimg. style. height = _ is. h * this. options. mul + "px ";
}
This. viewer. appendChild (this. viewimg );
},
Move: function (e ){
If (! This. options. mul)
This. options. mul = this. viewimg. offsetHeight/this. img. offsetHeight;
Var pos = this. getPos (this. img );
Var l=e.clientx-pos.x((document.doc umentElement. scrollLeft | document. body. scrollLeft); // The offset between the mouse position and the upper left corner of the image
Var t=e.clienty-pos.y((document.doc umentElement. scrollTop | document. body. scrollTop );
Var zs = this. getSize (this. viewer );
Var pl =-l * this. options. mul + zs. w/2;
Var pt =-t * this. options. mul + zs. h/2;
Pl = pl> 0? 0: pl;
Pt = pt> 0? 0: pt;

Var vs = this. getSize (this. viewimg );
Pl = Math. max (pl, zs. w-vs.w );
Pt = Math. max (pt, zs. h-vs.h );

This. viewimg. style. left = pl + "px ";
This. viewimg. style. top = pt + "px ";
},
Init: function (){
Var o = this;
Var load = function (a) {// image loading
O. createView. call (o );
O. img. setAttribute ("alt ","");
O. AE (o. img, "mousemove", function (event) {o. move. call (o, event );});
If (! O. options. viewer ){
O. AE (o. img, "mouseover", function () {o. options. onShow (); o. viewer. style. display = ""});
O. AE (o. img, "mouseout", function () {o. options. onHide (); o. viewer. style. display = "none "});
}
};
If (typeof (document. readyState) = "undefined" | window. opera ){
Var demo-document.doc umentElement | document. body;
Var h = de. scrollHeight;
Var t = setInterval (function (){
If (h = de. scrollHeight ){
ClearInterval (t );
Load ();
} Else h = de. scrollHeight;
},500 );
} Else if (document. readyState = "complete ")
Load ();
Else
O. AE (window, "load", load );
}
};