Ddpowerzoomer. js uses jQuery extension to achieve local image amplification (source code analysis)

Before loading ddpowerzoomer. js, you must import jquery. xx. js on the page, and then import ddpowerzoomer. js.

The following describes only the process of loading and executing the ddpowerzoomer. js source code.

1. The first line of the file

JQuery. noConflict () // prevents jQuery conflicts
2. last line of the file
JQuery (document). ready (function ($) {// initialize power zoomer on DOM load
Ddpowerzoomer. init ($)

}) // When the document of ddpowerzoomer. js is loaded, execute this line and initialize the dom node used to enlarge the local image (for details, see the following)

 

Init: function ($ ){

Var $ magnifier = $ ('<div style = "position: absolute; width: 100px; height: 100px; display: none; overflow: hidden; border: 1px solid black; "/> ') // The first div is used to control the movement of partial images.
. Append ('<div style = "position: relative; left: 0; top: 0;"/>') // The second div is used to store the enlarged image, and control the movement of the image.
. AppendTo (document. body) // Add the preceding two divs to the html document.
Ddpowerzoomer. $ magniier = {outer: $ magniier, inner: $ magniier. find ('div: eq (0) '), image: null} // initialize ddpowerzoomer. $ magniier, where $ magniier has all jquery objects used to partially zoom in images, including external div objects, internal div objects, and images stored in internal div objects.
$ Magniier = ddpowerzoomer. $ magniier
$ (Document). unbind ('mousemove. trackmagniier '). bind ('mousemove. trackmagniier', function (e) {// Add a mouse movement (mousemove. trackmagniier) event to the document
If (ddpowerzoomer. activeimage) {// when the mouse moves inside the large image, activeimage is not null
Ddpowerzoomer. movemagnifier (e, true) // Add a mobile event
}
})

$ Magniier. outer. bind (ddpowerzoomer. mousewheelevt, function (e) {// Add a mouse scroll (FF: DOMMouseScroll; IE: mousewheel) event to the outer div
If (ddpowerzoomer. activeimage ){
Var delta = e. detail? E. detail * (-120): e. wheelDelta // scroll up and return + 120 scroll down-120
If (delta <=-120) {// zoom out
Ddpowerzoomer. movemagnifier (e, false, "out ")
}
Else {// zoom in
Ddpowerzoomer. movemagnifier (e, false, "in ")
}
E. preventDefault () // equivalent to return false; prevent the event from being passed to the parent element. Here, it refers to the image to be enlarged.
}
})
}

3. jQuery extension implementation

JQuery. fn. addpowerzoom = function (options ){
Var $ = jQuery
Return this. each (function () {// return jQuery obj
If (this. tagName! = "IMG ")
Return true // skip to next matched element
Var $ imgref = $ (this)
If (this. offsetWidth> 0 & this. offsetHeight> 0) // if image has explicit CSS width/height defined
Ddpowerzoomer. setupimage ($, this, options)
Else if (this. complete) {// account for IE not firing image. onload
Ddpowerzoomer. setupimage ($, this, options)
}
Else {
$ Imgref. bind ('load', function (){
Ddpowerzoomer. setupimage ($, this, options)
})
}
})
} // Add the addpowerzoom Method for a certain type of jQuery object node.

// If the jQuery object node is not a jquery object of an image, true is returned and processing is not allowed.

// Otherwise, after the image is loaded, execute setupimage of the ddpowerzoomer object to pass in jquery $. The current image references this and the options parameter list that is passed in when addpowerzoom is called.
4. Implementation principle of setupimage

The following describes the implementation principle of ddpowerzoomer. setupimage.

Setupimage: function ($, imgref, options ){
Var s = jQuery. extend ({}, ddpowerzoomer. dsetting, options) // call the jquery built-in method to overwrite the parameters passed in when addpowerzoom is called to ddpowerzoomer. dsetting's default settings

(The meaning of each field in dsetting: {defaultpower: 2, powerrange: [2, 7], magnifiersize: [75, 75]} is described here. The first parameter defaultpower is a magnification,

The second parameter, powerrange, is used to zoom in or out when the mouse is scroll. The third parameter, magnifiersize, is used to set the length and width of the partially enlarged outer div)
Var $ imgref = $ (imgref)
Imgref.info = {// set parameters for the current IMG jquery object, used to design the position when moving the Event Callback Function with the mouse
Power: {current: s. defaultpower, range: s. powerrange },
Magdimensions: s. magnifiersize, // same as above
Dimensions: [$ imgref. width (), $ imgref. height ()], // image size
Coords: null // record or save the current IMG jquery object, and the offset value between the upper and lower sides (that is, the distance between the img border and the left border of the window)
}
$ Imgref. unbind ('mouseenter'). mouseenter (function (e) {// call when you move the cursor to the current image (initialize a partial zoomed-in image)
Var $ magniier = ddpowerzoomer. $ magniier
Using magniier.outer.css ({width: s. magniiersize [0], height: s. magniiersize [1]}) // sets the length and width of the external div
Var offset = $ imgref. offset ()
Var power = imgref.info. power. current
Using magnifier.inner.html ('') // Add img to the inner div. the img is the same as the original image src, but the length is different, depends on the magnification of power.
$ Magnifier. image = $ magnifier. outer. find ('img: first'hangzhou.css ({width: imgref.info. dimensions [0] * power, height: imgref.info. dimensions [1] * power}) // enlarge the img in the inner div
Var coords = {left: offset. left, top: offset. top, right: offset. left + imgref.info. dimensions [0], bottom: offset. top + imgref.info. dimensions [1]} // initialize coords.
Imgref.info. coords = coords
$ Magnifier. outer. show () // display and reference the current img to ddpowerzoomer. activeimage
Ddpowerzoomer. activeimage = imgref
})
}

 

 

5. Implementation principle of ddpowerzoomer. movemagnifier mouse movement callback function

Movemagnifier: function (e, moveBol, zoomdir) {// event e, whether to move the mouse or not, and how to move the cursor gun ('in' or 'out ')
Var activeimage = ddpowerzoomer. activeimage // obtain the image to be enlarged
Var activeimginfo = activeimage.info/when the image is uploaded,
Var coords = activeimginfo. coords // various margins of the current image
Var $ magniier = ddpowerzoomer. $ magniier
Var magdimensions = activeimginfo. magdimensions // obtain the size of the partial enlarged external div.
Var power = activeimginfo. power. current // current enlarged digits
Var powerrange = activeimginfo. power. range // zoom range
Var x = e. pageX-coords.left // get the horizontal, vertical width of the mouse point to be enlarged
Var y = e. pageY-coords.top
If (moveBol = true) {// when moving
If (e. pageX> = coords. left & e. pageX <= coords. right & e. pageY> = coords. top & e. pageY <= coords. bottom) // locate the external div
Using magniier.outer.css ({left: e. pageX-magdimensions [0]/2, top: e. pageY-magdimensions [1]/2}) // move magniier so it follows the cursor
Else {// when the cursor exceeds the border of the image to be zoomed in, the external div is hidden. The current image reference is null.
Ddpowerzoomer. activeimage = null
$ Magnifier. outer. hide () // hide magnifier
}
}
Else if (zoomdir) {// when scaling
Var od = activeimginfo. dimensions // get dimensions of image
Var newpower = (zoomdir = "in ")? Math. min (power + 1, powerrange [1]): Math. max (power-1, powerrange [0]) // take the zooming multiple
Var nd = [od [0] * newpower, od [1] * newpower]
Using magnifier.image.css ({width: nd [0], height: nd [1]}) // Scaling (processing witdh, height of img in inner div)
Activeimginfo. power. current = newpower // Save the magnification
}
Power = activeimginfo. power. current
Var newx =-x * power + magdimensions [0]/2 // calculate the img position in the inner div
Var newy =-y * power + magdimensions [1]/2
Using magnifier.inner.css ({left: newx, top: newy}) // display the calculated position
}

The effect is as follows:

 

 

Call:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> image magnifiers </title>
</Head>
<Body>
<Script type = 'text/javascript 'src = "./jquery-1.8.0.min.js"> </script>
<Script type = "text/javascript" src = "ddpowerzoomer. js"> </script>
<Script type = "text/javascript">
JQuery (function ($) {// fire on DOM ready
$ ('Img. gallery '). addpowerzoom ({magnifiersize: [100,100]})
})
</Script>
</Head>
<Body>
<Div align = "center">

</Div>
</Div>
</Body>
</Html>

Note: The code written by foreigners is much easier to read than that written in chinese. At least, they have good comments !!!