Go directly to the code (it's only 100来, little things)
Copy Code code 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) {//Lazybind mouse move event after mouse moves to the operating layer
var mousex, Mousey;
if (navigator.userAgent.indexOf ("MSIE 6.0") >= 0) {//in IE6 above versions and Google browsers
Mousey = _offsety (event, "Oriimage");
MouseX = _offsetx (event, "Oriimage");
else {//You need to append pixels in the FF browser as an offset unit instead of another
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);
Reset to 0 when the larger figure X is greater than 0, that is, when the leftmost margin is reached, and when the picture's X offset has exceeded the displayed container, it is reset to its X offset minus 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
}
Reset to 0 when the y-coordinate of the larger figure is greater than 0, that is, when the top margin is reached, and the negative number of its Y offset is the difference between the picture and the container when the picture's y-axis is already outside the displayed 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, it's basically a general logic, and here's a little bit of explanation,
1 It should be noted that there are many CSS hack places, now this thing is compatible Ff3.0,ie 6,
7, 8 and Chrome, the others haven't had time to experiment.
2 in the development of the image that is enlarged after the picture is the ID of biggerpic to move to the boundaries of the time to do special
Processing, the left and the top is very simple, directly to zero, but the right and the bottom of a little bit of trouble, you need to calculate the current
The offset of the picture relative to the container (that is, the ID container div) Here is a question, if you want to take a
A fixed value to overwrite the image from the top or right margin of the container, when the user is browsing will find a class
The phenomenon is like "jump frame" because I used the mouse relative to the operation to determine the offset of the current picture.
The distance of the device (that is, the div with id "oriimage") as the condition of judgment, it was found that the practice was not fine.
Sure, and will cause "jump frame", hence abandoned this plan. Now we are using the method of judging the position of the mouse separately,
This triggers a different logic, which is clearly written on the code.
3 when the page is loaded and the mouse leaves the operating layer, the position of the large image is set to the bottom right, is
Because in order to avoid the "jump frame" in the 2nd mentioned in the conditional judgment, in the first time the user triggers the mouse movement
event, if the operation layer on the right or the lower side of the entry, there will be incorrect display, which is also estimated
Many online directly put the magnifying glass layer in the load when set to hidden reason, I think it is still a bug, h
Look for prawns pointing the right way.
The 4 HTML is written as follows:
Below is the operation layer and the small map of the writing, CSS did not draw out, recently very lazy
<div id= "Oriimage" style= "Cursor:crosshair; Background-color:yellow; Overflow:hidden; width:150px; height:150px; " >
<!--this picture ID can be arbitrarily specified-->< /div>
Below is the effect layer and the big picture of the writing, CSS did not pull out, really lazy
<div id= "Container" style= "position:absolute; top:200px; left:450px; width:250px;height:250px; Z-index:10; Overflow:hidden; " >
</div>
PS: Each HTML element ID in addition to the operating layer of the picture is "oriimg", modify the words to modify JS.
The Magnifier layer style must be added as a "overflow:hidden;" This should be done JS inside go, lazy a bit.
Good things are finished, now to add, I have just entered the front end, a lot of deficiencies, we forgive,
Although the things are clumsy, but at least they knock themselves, the future useful to the students can directly ask me.
