Jquery-based product display magnifiers

Go directly to the Code (a total of only 100 lines, small things)
Copy codeThe Code is as follows:
$ (Document). ready (function (){
_ El ("biggerPic "). style. marginLeft = (0-(getOffsetNumber (_ el ("biggerPic "). style. width)-getOffsetNumber (_ el ("container "). style. width) + "px ";
_ El ("biggerPic "). style. marginTop = (0-(getOffsetNumber (_ el ("biggerPic "). style. height)-getOffsetNumber (_ el ("container "). style. height) + "px ";
$ ("# OriImage"). bind ('mouseleave ', function (event ){
_ El ("biggerPic "). style. marginLeft = (0-(getOffsetNumber (_ el ("biggerPic "). style. width)-getOffsetNumber (_ el ("container "). style. width) + "px ";
_ El ("biggerPic "). style. marginTop = (0-(getOffsetNumber (_ el ("biggerPic "). style. height)-getOffsetNumber (_ el ("container "). style. height) + "px ";
});
$ ("# OriImage"). bind ('mouseover', function (event ){
$ ("# OriImage"). bind ('mousemove ', function (event) {// The LazyBind move event only after the mouse moves to the operation layer
Var mouseX, mouseY;
If (navigator. userAgent. indexOf ("MSIE 6.0")> = 0) {// in IE6 or later versions and in GOOGLE browsers
MouseY = _ offsetY (event, "oriImage ");
MouseX = _ offsetX (event, "oriImage ");
} Else {// append the pixel to the FF browser as the offset unit rather than the other
MouseY = _ offsetY (event, "oriImage ");
MouseX = _ offsetX (event, "oriImage ");
}
Var playOffsetX = 0-mouseX/_ xPercent (_ el ("oriImage"). style. width, _ el ("biggerPic"). style. width );
Var playOffsetY = 0-mouseY/_ yPercent (_ el ("oriImage"). style. height, _ el ("biggerPic"). style. height );
// When the X coordinate of a large image is greater than 0, that is, when the leftmost margin is reached, it is reset to 0. When the X offset of the image exceeds the container displayed, then it is reset to its X offset to the negative number between the image and the container.
If (playOffsetY <0-(getOffsetNumber (_ el ("biggerPic "). style. height)-getOffsetNumber (_ el ("container "). style. height)-getOffsetNumber (_ el ("container "). style. height)/2
& PlayOffsetX> 0-(getOffsetNumber (_ el ("biggerPic"). style. width)-getOffsetNumber (_ el ("container"). style. width ))){
_ El ("biggerPic"). style. marginLeft = playOffsetX> 0? 0 + "px ":
PlayOffsetX + getOffsetNumber (_ el ("container"). style. width)/2> 0? 0 + "px": playOffsetX + getOffsetNumber (_ el ("container"). style. width)/2 + "px ";
Return;
}
// When the Y coordinate of a large image is greater than 0, that is, when the top margin is reached, it is reset to 0. When the Y offset of the image exceeds the container displayed, then it is reset to its Y offset to the negative number between the image and the container.
If (playOffsetX <0-(getOffsetNumber (_ el ("biggerPic "). style. width)-getOffsetNumber (_ el ("container "). style. width)-getOffsetNumber (_ el ("container "). style. width)/2
& PlayOffsetY> 0-(getOffsetNumber (_ el ("biggerPic"). style. height)-getOffsetNumber (_ el ("container"). style. height ))){
_ El ("biggerPic"). style. marginTop = playOffsetY> 0? 0 + "px ":
PlayOffsetY + getOffsetNumber (_ el ("container"). style. height)/2> 0? 0 + "px": playOffsetY + getOffsetNumber (_ el ("container"). style. height)/2 + "px ";
Return;
}
If (playOffsetY> = 0-(getOffsetNumber (_ el ("biggerPic "). style. height)-getOffsetNumber (_ el ("container "). style. height)-getOffsetNumber (_ el ("container "). style. height)/2
& PlayOffsetX> = 0-(getOffsetNumber (_ el ("biggerPic "). style. width)-getOffsetNumber (_ el ("container "). style. width)-getOffsetNumber (_ el ("container "). style. width)/2 ){
// Alert (0-(getOffsetNumber (_ el ("biggerPic "). style. height)-getOffsetNumber (_ el ("container "). style. height)-getOffsetNumber (_ el ("container "). style. height)/2 );
_ El ("biggerPic"). style. marginLeft = playOffsetX> 0? 0 + "px ":
PlayOffsetX + getOffsetNumber (_ el ("container"). style. width)/2> 0? 0 + "px": playOffsetX + getOffsetNumber (_ el ("container"). style. width)/2 + "px ";
_ El ("biggerPic"). style. marginTop = playOffsetY> 0? 0 + "px ":
PlayOffsetY + getOffsetNumber (_ el ("container"). style. height)/2> 0? 0 + "px": playOffsetY + getOffsetNumber (_ el ("container"). style. height)/2 + "px ";
Return;
}
Return;
});
});
});

Well, the above is basically the general logic. Here I will explain it a little bit,

1. You should have noticed that there are still a lot of css hack. Now this is compatible with FF3.0, IE 6,
7, 8 and chrome, others have not been tested yet

2. during development, when the enlarged image, that is, the image with the ID of biggerPic, is moved to the boundary
Processing: on the left and top, it is easy to directly return to zero, but on the right and bottom, it is a little more troublesome and needs to calculate the current
The offset between the image and the container (that is, the DIV whose ID is container). Here is a problem.
Fixed values to overwrite the image margin or right margin from the container.
It is similar to frame skipping because the mouse is used to determine the offset of the current image.
The distance (that is, the DIV whose ID is "oriImage") is used as the condition for judgment. Afterwards, it is found that this method is not refined.
Indeed, it will cause a "frame jump" and thus give up this solution. The following method is used to determine the mouse position separately,
This triggers different logic, and the code is clearly written.

3. When the page is loaded and the mouse leaves the operation layer, set the position of the big image to the rightmost bottom.
In order to avoid the frame jump mentioned in the second point, the user triggers the mouse movement immediately.
If an event is displayed on the right or bottom of the operation layer, it is incorrectly displayed.
I think this is still a BUG because many websites directly set the magnifier layer to "hidden" during loading.
Hope you can give us some advice.

4. the HTML format is as follows:
The following is the method of the operation layer and the small graph in it. CSS is not extracted, and it is very lazy recently.
<Div id = "oriImage" style = "cursor: crosshair; background-color: Yellow; overflow: hidden; width: 150px; height: 150px;">
<! -- This image ID can be specified arbitrarily --> </div>

The following is how to write the effect layer and the large image in it. CSS is not extracted, so it is really lazy.
<Div id = "container" style = "position: absolute; top: 200px; left: pixel PX; width: 250px; height: 250px; z-index: 10; overflow: hidden; ">
</div>

PS: apart from the image in the operation layer, that is, "oriImg", the ID of each HTML element must be modified to modify JS.
The pattern of the magnifier layer must be added as "overflow: hidden;". This should be done in JS, so I'm a little lazy.
I have finished talking about things. Now, I just got involved in the front-end, and I have many shortcomings. Thank you for your consideration,
Something is poor, but I think it is just my own. If you are useful in the future, you can ask me directly.