Generally used to enlarge the view of the merchandise picture, in every guest, Jingdong mall, Alibaba, etc. have similar effects.
The advantage is that you can zoom in on the picture near the original image, and can be controlled by the mouse to view the site.
A while ago see Sohighthesky picture amplification effect, whim oneself also write a look.
This program has the following characteristics:
1, support the use of the original image to enlarge or new picture set large image;
2, the big picture completes the load before uses the original image to enlarge replaces, reduces the operation wait time;
3, support the mouse scrolling zoom;
4, you can set the display range or display box size set display size;
5, you can set whether to automatically hide the display box;
6, support the expansion of the form of plug-ins to achieve more functions (the next chapter in detail).
Compatible: IE6/7/8, Firefox 3.6.2, opera 10.51, Safari 4.0.4, Chrome 4.1
Copy Code code as follows:
var styles;
if (!viewer.clientwidth) {
var style = Viewer.style;
Styles = {
Display:style.display,
Position:style.position,
Visibility:style.visibility
};
$ $D. SetStyle (Viewer, {
Display: "Block", Position: "Absolute", Visibility: "Hidden"
});
}
This._viewerwidth = Viewer.clientwidth;
This._viewerheight = Viewer.clientheight;
if (styles) {$ $D. SetStyle (viewer, styles);}
Rangewidth = Math.ceil (This._viewerwidth/scale);
Rangeheight = Math.ceil (This._viewerheight/scale);
Note that the display range is obtained by Clientwidth/clientheight.
If the display box is a hidden state that displays none, you cannot get clientwidth/clientheight directly.
In this case, the program gets it in the following ways:
1, record the original value of display/position/visibility;
2, respectively set to "block"/"absolute"/"hidden", which is both hidden and can occupy the state;
3, get the parameters;
4, reset the original value, restore the original state.
When the display range is obtained, the range parameter can be obtained by the matching ratio.
PS: This is a common way to get the size parameters of the placeholder elements, jquery CSS is also used to get width/height in this way.
Scale can be calculated after the decimal, and size can only be integers, the program will use Math.ceil to rounding.
"Magnifying effect"
Once everything is set up, you can execute the start Setup trigger.
The program automatically executes the Start method, which is essentially a mouseover/mousemove bound _start program for the original object:
var image = This._image, START = This._start;
$ $E. Addevent (Image, "mouseover", START);
$ $E. Addevent (Image, "MouseMove", START);
corresponding to the original object and move on the original object, respectively.
PS: If you use attachevent, you should also pay attention to the problem of repeatedly binding the same function, Addevent here does not have this problem.
Binding of _start programs, mainly for some events to unbind and bind:
Copy Code code as follows:
$ $E. Removeevent (Image, "mouseover", This._start);
$ $E. Removeevent (Image, "MouseMove", This._start);
$ $E. Addevent (document, "MouseMove", this._move);
$ $E. Addevent (document, "Mouseout", this._out);
In order to end the magnification when the window is removed, the mouseout of the document is bound to the _out program:
Copy Code code as follows:
This._out = $ $F. Bindaseventlistener (function (e) {
if (!e.relatedtarget) this._end ();
}, this);
When the mouse moves out of document triggers Mouseout, if the current relatedtarget is null, the execution of the _end end program is delayed:
var othis = This, end = function () {othis._end ();};
This._end = function () {Othis._timer = settimeout (end, Othis.delay);
In the _end program, the Stop method is executed first, where all possible bound events are removed, and the start method continues to wait for the trigger.
and MouseMove bound _move Mobile program, mainly used to achieve the mouse to move where to enlarge the function of where.
To accommodate more situations (such as other patterns of extension), bind it to the document, but you cannot use the Mouseout event to trigger the removal program.
The program through the mouse and the original image coordinates comparison, to determine whether the mouse moved out of the original object range:
Copy Code code as follows:
var x = e.pagex, y = e.pagey, rect = this._rect;
if (x < Rect.left | | | x > Rect.right | | y < rect.top | | y > Rect.bottom) {
This._end ();
} else {
...
}
If the mouse moves out of the original object, it performs the _end end amplification effect.
If the mouse moves on the original object, the coordinates are computed and the coordinates are converted to the desired value by the _repair program.
Finally, the left/top positioning of the large image is set so that the display box displays the part to enlarge.
PS: I tried to use the scrollleft/scrolltop to do the positioning, but found that in IE will be like the sawtooth as the move, the larger the more obvious, so give up.
"Mouse Scrolling Zoom"
If you set the mouse property to True, the mouse scrolling zoom feature is turned on.
During a magnification effect, you can scale the larger image by scrolling the mouse wheel.
In fact, according to the changes in the wheel dynamic parameters to modify the magnification ratio.
About the mouse scrolling event, also mentioned in the slider, but only then analyzed the difference between IE and FF, here again analysis.
First, IE uses MouseWheel to bind events, using the Wheeldelta of event to get the scrolling parameters.
Other browsers test with the following code:
Copy Code code as follows:
<! DOCTYPE html>
<body style= "height:1000px;" >
<script>
function Test (e) {alert (e.type+ ": +e.detail+" _ "+e.wheeldelta)}
Document.addeventlistener ("Dommousescroll", test, false);
Document.addeventlistener ("MouseWheel", test, false);
</script>
</body>
Scroll down to get the following results:
ff:dommousescroll:3_undefined
opera:mousewheel:3_-120
chrome/safari:mousewheel:0_-120
You can see the binding of events, FF only supports Dommousescroll, others only support MouseWheel.
And the acquisition of rolling parameters, FF only support Detail,opera two kinds of support, Chrome/safari support Wheeldelta.
PS: Do not understand Chrome/safari detail why is 0, have other uses?
and Dommousescroll and MouseWheel Another difference is that the former cannot directly bind elements, the latter can.
That can be elem.onmousewheel, but not elem.ondommousescroll.
Based on the above analysis, it is in the _start program that the _mouse program is bound to the scrolling event of document:
This.mouse && $ $E. Addevent (document, $ $B. Firefox? "Dommousescroll": "MouseWheel", this._mouse);
A new magnification is obtained in the _mouse program based on the scrolling parameter and the custom rate scaling ratio:
This._scale + = (E.wheeldelta E.wheeldelta/( -120): (E.detail | | 0)/3) * this.rate;
When you modify the scale, the program parameters also need to be recalculated.
Because _rangewidth/_rangeheight can affect the calculation process, revert to a custom default value:
var opt = this.options;
This._rangewidth = Opt.rangewidth;
This._rangeheight = Opt.rangeheight;
Then perform the _initsize and _initdata to reset the dimensions and parameters, and then perform the _move relocation.
Finally remember to use Preventdefault to prevent the trigger page from scrolling.
Use Tips
"Picture Settings"
The program supports larger images using the original artwork to enlarge or use the new larger image.
If you use the new large image and the picture is relatively large, it is strongly recommended to set the magnification, so that the program will automatically load the large image before using the original to enlarge, so you do not have to wait for the big picture load completed.
Also note that the new large figure itself to the width and height of the same as the original, otherwise on the wrong coordinates, the use of the original image amplification is not the problem.
Show box settings
There are two ways to set the size of a display box:
To fix the display range, set the Rangewidth/rangeheight first, the program will be based on the display range and magnification scale to calculate the size of the display box;
To display the current size of the display box, as long as you do not set the Rangewidth/rangeheight or set to 0 on it.
"Reset"
Many properties cannot be modified directly because there are many associations between the attributes and the objects.
The program sets a reset method that is specifically used to modify such attributes.
If the program is loaded and then modifies the style that affects the program's calculations, such as the original size, display box size, and so on, perform a reset to reset the parameters and properties.
"Floating positioning"
The program does not set the display box floating positioning function, if necessary, you can add yourself.
Simple positioning can refer to the method of the instance, but also carefully cover the problem of select.
If you want more complex floating positioning, you can refer to the floating position hint effect.
"Opera bugs."
The test found that opera 10.10 had two bugs.
The IMG element is set to be transparent when you see the background map, using JS to modify the mouse style will have problems.
However, these two problems have been repaired in 10.50, and have not yet upgraded to rise quickly.
"Maxthon bugs."
A problem was identified with the Maxthon 2.5.1 test, and the following code was tested:
Copy Code code as follows:
<div id= "T" style= "width:50px;" ></div>
<script>
var T=document.getelementbyid ("T");
T.clientwidth;
T.style.display= "None";
alert (t.clientwidth);
</script>
Usually hidden with display, clientwidth should be 0, but Maxthon seemingly did not deal with this situation.
This affects the ClientWidth judgment in the program, but it has little effect on general usage.
I have already submitted the question, I do not know whether to deal with it.
Instructions for use
When instantiated, you must have an IMG element as the original object, and a container as the display box:
var iz = new Imagezoom ("Idimage", "Idviewer");
Optional parameters are used to set the default properties of the system, including:
Properties: Default value//description
Mode: "Simple",//pattern
scale:0,//ratio (big picture/original image)
Maximum proportion of max:10,//
min:1.5,//minimum ratio
Originpic: "",//original address
Zoompic: "",//Large map address
rangewidth:0,//Display Range width
rangeheight:0,//Display Range Height
delay:20,//Delay End Time
autohide:true,//is automatically hidden
mouse:false,//Mouse Zoom
Rate:. 2,//Mouse Zoom ratio
OnLoad: $$.emptyfunction,//execution when loading completes
OnStart: $$.emptyfunction,//When starting to zoom out
OnMove: $$.emptyfunction,//when enlarged move
OnEnd: $$.emptyfunction//at the end of the zoom out
The use of the pattern is illustrated in the next extension.
After initialization, scale, Max, Min, Originpic, Zoompic, Rangewidth, rangeheight These properties need to be modified using the Reset method.
The following methods are also available:
Start: Enlarge the program (the program will automatically execute);
STOP: Enlarge the program;
Reset: Modify settings;
Dispose: Destroy the program.
Program source Code
Copy Code code as follows:
var imagezoom = function (image, viewer, options) {
This._initialize (image, viewer, options);
This._initmode (This.options.mode);
This._oninit ();
This._initload ();
};
Imagezoom.prototype = {
Initialization program
_initialize:function (image, viewer, options) {
This._image = $$ (image);//Original artwork
This._zoom = document.createelement ("img");//display diagram
This._viewer = $$ (viewer);//Display box
This._viewerwidth = 0;//Display box width
This._viewerheight = 0;//Display box height
This._preload = new Image ();//Preload Object
This._rect = null;//Original coordinates
This._repairleft = 0;//display map X coordinate correction
This._repairtop = 0;//Display Graph y-coordinate correction
This._rangewidth = 0;//Display range width
This._rangeheight = 0;//Display range height
This._timer = null;//Timer
this._loaded = false;//whether to load
This._substitute = false;//whether to replace
var opt = this._setoptions (options);
This._scale = Opt.scale;
This._max = Opt.max;
This._min = Opt.min;
This._originpic = Opt.originpic;
This._zoompic = Opt.zoompic;
This._rangewidth = Opt.rangewidth;
This._rangeheight = Opt.rangeheight;
This.delay = Opt.delay;
This.autohide = Opt.autohide;
This.mouse = Opt.mouse;
This.rate = opt.rate;
This.onload = Opt.onload;
This.onstart = Opt.onstart;
This.onmove = Opt.onmove;
This.onend = Opt.onend;
var othis = This, end = function () {othis._end ();};
This._end = function () {Othis._timer = settimeout (end, Othis.delay);
This._start = $ $F. Bindaseventlistener (This._start, this);
This._move = $ $F. Bindaseventlistener (This._move, this);
This._mouse = $ $F. Bindaseventlistener (This._mouse, this);
This._out = $ $F. Bindaseventlistener (function (e) {
if (!e.relatedtarget) this._end ();
}, this);
},
Set default Properties
_setoptions:function (options) {
This.options = {//default value
Mode: "Simple",//pattern
scale:0,//ratio (big picture/original image)
Maximum proportion of max:10,//
min:1.5,//minimum ratio
Originpic: "",//original address
Zoompic: "",//Large map address
rangewidth:0,//Display Range width
rangeheight:0,//Display Range Height
delay:20,//Delay End Time
autohide:true,//is automatically hidden
mouse:false,//Mouse Zoom
Rate:. 2,//Mouse Zoom ratio
OnLoad: $$.emptyfunction,//execution when loading completes
OnStart: $$.emptyfunction,//When starting to zoom out
OnMove: $$.emptyfunction,//when enlarged move
OnEnd: $$.emptyfunction//at the end of the zoom out
};
Return $$.extend (this.options, Options | | {});
},
Initialize function properties based on schema
_initmode:function (mode) {
mode = $$.extend ({
options:{},
Init: $$.emptyfunction,
Load: $$.emptyfunction,
Start: $$.emptyfunction,
End: $$.emptyfunction,
Move: $$.emptyfunction,
Dispose:$$.emptyfunction
}, (Imagezoom._mode | | {}) [Mode.tolowercase ()] | | {} );
This.options = $$.extend (mode.options, this.options);
This._oninit = Mode.init;
This._onload = Mode.load;
This._onstart = Mode.start;
This._onend = Mode.end;
This._onmove = Mode.move;
This._ondispose = Mode.dispose;
},
Initialize load
_initload:function () {
var image = This._image, Originpic = This._originpic,
Useorigin =!this._zoompic && This._scale,
LoadImage = $ $F. Bind (Useorigin this._loadoriginimage:this._loadimage, this);
Set Auto Hide
if (this.autohide) {this._viewer.style.display = ' none ';}
First load the original artwork
if (originpic && originpic!= image.src) {//Use a custom address
Image.onload = LoadImage;
IMAGE.SRC = Originpic;
else if (IMAGE.SRC) {//Use element address
if (!image.complete) {//not finished loading
Image.onload = LoadImage;
else {//already loaded
LoadImage ();
}
} else {
return;//No original address
}
Load large image
if (!useorigin) {
var preload = this._preload, Zoompic = This._zoompic | | IMAGE.SRC,
Loadpreload = $ $F. Bind (This._loadpreload, this);
if (zoompic!= preload.src) {//new address reload
Preload.onload = Loadpreload;
PRELOAD.SRC = Zoompic;
else {//is loading
if (!preload.complete) {//not finished loading
Preload.onload = Loadpreload;
else {//already loaded
This._loadpreload ();
}
}
}
},
Original Artwork Amplification Loader
_loadoriginimage:function () {
This._image.onload = null;
THIS._ZOOM.SRC = THIS._IMAGE.SRC;
This._initloaded ();
},
Original Loading Program
_loadimage:function () {
This._image.onload = null;
if (this._loaded) {//large image already loaded
This._initloaded ();
} else {
This._loaded = true;
if (This._scale) {//custom proportions are used to enlarge and replace the larger image
This._substitute = true;
THIS._ZOOM.SRC = THIS._IMAGE.SRC;
This._initloaded ();
}
}
},
Large image pre-loading procedure
_loadpreload:function () {
This._preload.onload = null;
THIS._ZOOM.SRC = THIS._PRELOAD.SRC;
if (this._loaded) {//original artwork already loaded
No substitution used
if (!this._substitute) {this._initloaded ();}
} else {
This._loaded = true;
}
},
Initialize load settings
_initloaded:function (SRC) {
Initializing a display diagram
This._initsize ();
Initialize the Display box
This._initviewer ();
Initializing data
This._initdata ();
Start execution
This._onload ();
This.onload ();
This.start ();
},
Initialize display diagram dimensions
_initsize:function () {
var zoom = this._zoom, image = this._image, scale = This._scale;
if (!scale) {scale = This._preload.width/image.width;}
This._scale = scale = Math.min (Math.max (this._min, scale), This._max);
Size the display chart proportionally
Zoom.width = Math.ceil (image.width * scale);
Zoom.height = Math.ceil (image.height * scale);
},
Initialize the Display box
_initviewer:function () {
var zoom = this._zoom, viewer = This._viewer;
Set style
var styles = {padding:0, overflow: "Hidden"}, p = $ $D. GetStyle (Viewer, "position");
if (P!= "relative" && p!= "Absolute") {styles.position = "relative";};
$ $D. SetStyle (viewer, styles);
Zoom.style.position = "absolute";
Insert a display diagram
if (!$ $D. Contains (viewer, zoom)) {viewer.appendchild (zoom);}
},
Initializing data
_initdata:function () {
var zoom = this._zoom, image = this._image, viewer = This._viewer,
Scale = This._scale, Rangewidth = this._rangewidth, rangeheight = this._rangeheight;
Artwork coordinates
This._rect = $ $D. Rect (image);
Correction parameters
This._repairleft = Image.clientleft + parseint ($ $D. GetStyle (Image, "padding-left"));
This._repairtop = Image.clienttop + parseint ($ $D. GetStyle (Image, "padding-top"));
Set range parameters and display box sizes
if (rangewidth > 0 && rangeheight > 0) {
Rangewidth = Math.ceil (rangewidth);
Rangeheight = Math.ceil (rangeheight);
This._viewerwidth = Math.ceil (rangewidth * scale);
This._viewerheight = Math.ceil (rangeheight * scale);
$ $D. SetStyle (Viewer, {
Width:this._viewerwidth + "px",
Height:this._viewerheight + "px"
});
} else {
var styles;
if (!viewer.clientwidth) {//hidden
var style = Viewer.style;
Styles = {
Display:style.display,
Position:style.position,
Visibility:style.visibility
};
$ $D. SetStyle (Viewer, {
Display: "Block", Position: "Absolute", Visibility: "Hidden"
});
}
This._viewerwidth = Viewer.clientwidth;
This._viewerheight = Viewer.clientheight;
if (styles) {$ $D. SetStyle (viewer, styles);}
Rangewidth = Math.ceil (This._viewerwidth/scale);
Rangeheight = Math.ceil (This._viewerheight/scale);
}
This._rangewidth = Rangewidth;
This._rangeheight = Rangeheight;
},
Begin
_start:function () {
Cleartimeout (This._timer);
var viewer = this._viewer, image = this._image, scale = This._scale;
Viewer.style.display = "block";
This._onstart ();
This.onstart ();
$ $E. Removeevent (Image, "mouseover", This._start);
$ $E. Removeevent (Image, "MouseMove", This._start);
$ $E. Addevent (document, "MouseMove", this._move);
$ $E. Addevent (document, "Mouseout", this._out);
This.mouse && $ $E. Addevent (document, $ $B. Firefox? "Dommousescroll": "MouseWheel", this._mouse);
},
Move
_move:function (e) {
Cleartimeout (This._timer);
var x = e.pagex, y = e.pagey, rect = this._rect;
if (x < Rect.left | | | x > Rect.right | | y < rect.top | | y > Rect.bottom) {
This._end ()//move out of original image range
} else {
var zoom = This._zoom,
pos = This._repair (
X-rect.left-this._repairleft,
Y-rect.top-this._repairtop
);
This._onmove (E, POS);
Set positioning
Zoom.style.left = pos.left + "px";
Zoom.style.top = pos.top + "px";
This.onmove ();
}
},
Correction coordinates
_repair:function (x, y) {
var scale = this._scale, zoom = This._zoom,
Viewerwidth = This._viewerwidth,
Viewerheight = This._viewerheight;
Correction coordinates
x = Math.ceil (VIEWERWIDTH/2-X * scale);
y = Math.ceil (VIEWERHEIGHT/2-y * scale);
Scope limit
x = Math.min (Math.max (x, Viewerwidth-zoom.width), 0);
y = math.min (Math.max (y, Viewerheight-zoom.height), 0);
return {left:x, top:y};
},
End
_end:function () {
This._onend ();
This.onend ();
if (this.autohide) {this._viewer.style.display = ' none ';}
This.stop ();
This.start ();
},
Mouse Zoom
_mouse:function (e) {
This._scale + = (E.wheeldelta E.wheeldelta/( -120): (E.detail | | 0)/3) * this.rate;
var opt = this.options;
This._rangewidth = Opt.rangewidth;
This._rangeheight = Opt.rangeheight;
This._initsize ();
This._initdata ();
This._move (e);
E.preventdefault ();
},
Begin
Start:function () {
if (this._viewerwidth && this._viewerheight) {
var image = This._image, START = This._start;
$ $E. Addevent (Image, "mouseover", START);
$ $E. Addevent (Image, "MouseMove", START);
}
},
Stop it
Stop:function () {
Cleartimeout (This._timer);
$ $E. Removeevent (This._image, "mouseover", This._start);
$ $E. Removeevent (This._image, "MouseMove", This._start);
$ $E. Removeevent (document, "MouseMove", this._move);
$ $E. Removeevent (document, "Mouseout", this._out);
$ $E. Removeevent (document, $ $B. Firefox? "Dommousescroll": "MouseWheel", this._mouse);
},
Modify settings
Reset:function (options) {
This.stop ();
var viewer = this._viewer, zoom = This._zoom;
if ($ $D. Contains (viewer, zoom)) {viewer.removechild (zoom);}
var opt = $$.extend (this.options, Options | | {} );
This._scale = Opt.scale;
This._max = Opt.max;
This._min = Opt.min;
This._originpic = Opt.originpic;
This._zoompic = Opt.zoompic;
This._rangewidth = Opt.rangewidth;
This._rangeheight = Opt.rangeheight;
Resetting properties
this._loaded = This._substitute = false;
This._rect = null;
This._repairleft = This._repairtop =
This._viewerwidth = this._viewerheight = 0;
This._initload ();
},
Destruction procedures
Dispose:function () {
This._ondispose ();
This.stop ();
if ($ $D. Contains (This._viewer, this._zoom)) {
This._viewer.removechild (This._zoom);
}
This._image.onload = This._preload.onload =
This._image = This._preload = This._zoom = This._viewer =
This.onload = This.onstart = This.onmove = This.onend =
This._start = This._move = This._end = This._out = null
}
}
Reprint please indicate the source: http://www.cnblogs.com/cloudgamer/
If you have any suggestions or questions, please feel free to comment.
Package Download Address
