JavaScript Image Amplification Effect Function _ image effect

<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;} . CLA {border:solid 1px #09c;} </STYLE> <div class=test id=div1> <H3> demo </H3> <DL> <dt>1. Picture and zoom in using different pictures (size picture to proportional phase The same) can also specify the magnification (relative to the small picture calculation) <pre>new imagezoom ("Img1", {//mul:6,//Specify the magnification multiplier onshow:function () {document.title= "show, You are are moving on the image. ";}, Onhide:function () {document.title= ' You mouse move out the image '; }, Bigimg: ". /images/tong.jpg "//Specify enlarge picture path}); </pre> <dd> <dt>2. Use the same picture to set the small picture wide or high, Here specified: style= "height:300px", (lazy mode, ^o^, the following are also the case) <pre>new imagezoom ("Dd2", {////The first parameter specifies a picture or its ID (also can be a picture's container or ID , the first child element in the container to be a picture)//mul:3}); </PRE> <dd id=dd2> <DD id=info> <dt>3. The enlarged picture appears in the specified container <pre>new imagezoom ("Img3", {viewer: "imgshow"//Specify the div to display or its ID}) </PRE> <dd& Gt; <DD> picture preview: <div id=imgshow ></DIV> <dt& Gt;4. A div that displays a large image to specify a multiple <pre>new imagezoom ("Img4", {mul:5,//magnify 5 times times VIEWERCLA: "CLA",//) specifies the style of the display layer viewermul:1.2// The display layer is 1.2 times times the size of the small picture}); </PRE> <dd> </DD></DL> Click to download JS source PS: In order to avoid the problem of FF (under FF if the page load is too slow, may not get the picture size) it is best to put the code in the onload implementation update:2009-11-15 21:40, thanks to danica7773, according to its recommendations plus Customize the display layer'sStyles, show and hide events <script src= "Http://files.jb51.net/imgby/imageZoom.js" Type=text/javascript></script> < SCRIPT type=text/javascript> window.onload=function () {New Imagezoom ("Img1", {//mul:6,//specifies a multiple magnification onshow:function () {document.title= ' show,you are moving on the image. ';}, Onhide:function () {document.title= "You mouse move out" I Mage "; }, Bigimg: "http://www.jb51.net/upload/2009-11/20091115231842870.jpg"//Specify enlarge picture path}); New Imagezoom ("Dd2", {///The first parameter specifies a picture or its ID (can also be the picture's container or ID, the first child element in the container to be a picture)//mul:3}); New Imagezoom ("Img3", {viewer: "imgshow"//Specify the DIV or its ID to display); New Imagezoom ("Img4", {mul:5,//magnified 5 times times VIEWERCLA: "CLA", viewermul:1.2//display layer with small picture of 1.2 times times the size}); } </SCRIPT> </DIV>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Imagezoom.js

Copy Code code as follows:

/*
*author:sohighthesky
*date:2009-11-14
*/
/*
*img specify the picture or its ID to enlarge
*options: See comments in SetOptions in 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) {//Fetch 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,//default to not enlarge (show picture's original size)
bigimg:null,//specifies the enlarged picture path (to be proportional to the small plot).
Viewer:null,//Specify the location of the display (can be a DIV or its id)
VIEWERCLA: "",//Preview Div class style
viewermul:1,//specifies the magnification of the div to display, the default is the original size, and 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 ("div");
THIS.VIEWER.CLASSNAME=THIS.OPTIONS.VIEWERCLA;
var pos=this.getpos (this.img);
this.viewer.style.csstext= "Display:none;overflow:hidden;position:absolute;top:" +pos.y+ "Px;left:" + (pos.x+_is.w+ + "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.csstext= "position:relative;left:-33%;top:-33%;";
this.viewimg.src=this.options.bigimg;
if (This.options.mul) {//setting 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.documentElement.scrollLeft | | document.body.scrollLeft);//mouse position relative to the top left corner of the picture
var t=e.clienty-pos.y+ (Document.documentElement.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) {//Picture 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 De=document.documentelement | | 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);
}
};