Product display magnifying glass based on jquery_jquery

Just upload the code (it only costs 100 in total, small thing)

Copy the code The 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) { // After the mouse moves to the operation layer LazyBind mouse movement event
var mouseX, mouseY;
if (navigator.userAgent.indexOf("MSIE 6.0") >= 0) { //Under IE6 and above versions and GOOGLE browser
mouseY = _offsetY(event, "oriImage");
mouseX = _offsetX(event, "oriImage");
} else {//In FF browser, you need to append pixels as the offset unit and not 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 the large image is greater than 0, that is, it is reset to 0 when it reaches the leftmost margin. When the X offset of the image has exceeded the displayed container, it is reset to its X offset. It is the negative number of the difference between the picture 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 the big picture is greater than 0, it means reaching It is reset to 0 at the top margin. When the Y offset of the picture has exceeded the displayed container, it is reset to the negative number of the difference between the picture 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 is a little explanation,

1 Everyone should have noticed that there are still a lot of CSS HACKs. Now this thing is compatible with FF3.0 and IE 6 ,
7, 8 and chrome, others have not had time to test

2 During development, when the enlarged image, that is, the image with the ID biggerPic, needs to be special when moved to the border
Processing, the left and upper sides are very simple, just return to zero, but the right and lower sides are a little more troublesome. You need to calculate the offset of the current
image relative to the container (that is, the DIV with the ID of container). Here is one The problem is, if you want to use a
fixed value to re-cover the top or right margin of the image from the container, the user will find a
-like "frame skipping" phenomenon when browsing. The reason is because When I used to determine the offset of the current image, I used the distance of the mouse relative to the operating container (that is, the DIV with the ID "oriImage") as the judgment condition. I later found that this approach was not precise enough
Indeed, and it would cause "frame skipping", so this plan was abandoned. The method used now is to judge the mouse position separately,
to trigger different logic. The code is clearly written.

3 The reason why the position of the large image is set to the bottom right when the page is loaded and the mouse leaves the operation layer is
in order to avoid the "frame skipping" mentioned in the second point. Conditional judgment is used. When the user triggers the mouse movement
event for the first time, if the user enters from the right or lower side of the operation layer, there will be incorrect display. This is probably
too many. The reason why the magnifying glass layer is directly set to hidden when loading on the Internet is still a BUG. I hope
someone can point out the correct method.

4 The HTML is written as follows:
The following is the writing of the operation layer and the small pictures placed in it. The CSS is not extracted. I am very lazy recently

The following is the effect layer and the The way to write the big picture, CSS is not extracted, is really lazy

PS: In addition to the image in the operation layer, which is "oriImg", the ID of each HTML element needs to be modified by modifying the JS.
The style of the magnifying glass layer must add a "overflow:hidden;" should have been implemented in JS, but I was too lazy.
Now that I have finished talking about the good stuff, I would like to add that I just got involved in the front-end, so I have a lot of shortcomings. Please bear with me.
Although things are It's clumsy, but at least I typed it myself. Students who may need it in the future can ask me directly.