Magnifier is not a difficult effect, just because some accurate numerical calculation is involved, it is more cumbersome. In the coming days, I will write an article about the JavaScript Magnifier series on a regular basis, each time speaking a point, from the point and face, and finally complete the whole effect.
This time we first learn how to move lenses on thumbnails. (This is DEMO)
Thumbnails and lenses consist of a DOM structure as follows.
Copy Code code as follows:
<a id= "thumb" href= "#" >
<span id= "Glass" ></span>
</a>
I place the picture and lens nodes in the thumbnail container, use the thumbnail container as the relative position reference, and modify the position of the lenses when the MouseMove event is triggered. In other words, the problem we have to solve is to figure out the position of the upper-left corner of the lens in the thumbnail container. The JavaScript code for calculating lens displacements is as follows.
Copy Code code as follows:
/**
* Get the position of the lens on the magnified target element
* @param EV-triggered event
* @param thumb thumbnail objects
* @param Glass Lens Object
* @return x: the transverse position of the lens on the magnified target element, Y: The longitudinal position of the lens on the target element
*/
function Getglassoffset (EV, thumb, glass) {
var offset = {
left:0,
top:0
};
Offset amount
var thumboffset = Getcumulativeoffset (thumb);
The position of the mouse on the page
var mousepoint = getmousepoint (EV);
Actual size of Lens
var glasssize = GetSize (glass);
Abbreviated Figure actual Size
var thumbsize = GetSize (thumb);
Cursor Landscape position
var Cursorx = Mousepoint.x-thumboffset.left;
Transverse offset of lens
Offset.left = CURSORX-GLASSSIZE.WIDTH/2;
if (Offset.left < 0) {
Offset.left = 0;
else if (Offset.left > Thumbsize.width-glasssize.width) {
Offset.left = Thumbsize.width-glasssize.width;
}
Cursor Portrait position
var cursory = Mousepoint.y-thumboffset.top;
Lens longitudinal offset
Offset.top = CURSORY-GLASSSIZE.HEIGHT/2;
if (Offset.top < 0) {
offset.top = 0;
else if (Offset.top > Thumbsize.height-glasssize.height) {
Offset.top = Thumbsize.height-glasssize.height;
}
return offset;
}
The position of the top left corner of the lens in the thumbnail container = mouse position-the position of the upper-left corner of the thumbnail-half of the lens size
When the lens is outside the container, pull the lens aside. All code please peep DEMO. (Do you know why I used to get the mouse position through JS?)
After leaving a lesson study questions, when the lens with a border, how to ensure that the frame does not affect the accuracy of the lens movement?
