My general idea is to listen to the coordinates of the mouse from time to time. When the mouse moves, the transparent layer moves with the mouse, and the large image moves relative to the transparent layer. Read the code.
Copy codeThe Code is as follows: <! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> magnifiers </title>
<Meta name = "Keywords" content = "">
<Meta name = "Description" content = "">
<Style type = "text/css">
/* Reset {*/
Html {color: #000; background: # fff ;}
Body, div {padding: 0; margin: 0 ;}
Img {border: none ;}
/*} Reset */
. Outer {width: 200px; height: 150px; position: relative; margin: 20px auto ;}
. Inner {width: 80px; height: 60px; background: # f55; position: absolute; opacity: 0.5; filter: alpha (opacity = 50); left: 0; top: 0; cursor: pointer ;}
. Aa {width: 320px; height: 240px; position: relative; border: 1px red solid; margin: 20px auto; overflow: hidden ;}
. Imgs {position: absolute ;}
. Outer img {width: 200px; height: 150px ;}
</Style>
</Head>
<Body>
<Div>
<Div class = "outer" id = "outer">
<Div class = "inner" id = "inner"> </div>
</Div>
<Div class = "aa" id = "aa">
<Div class = "imgs" id = "imgs"> </div>
</Div>
</Div>
<Script type = "text/javascript">
Var outer = document. getElementById ("outer ");
Var inner = document. getElementById ("inner ");
Var aa = document. getElementById ("aa ");
Var imgs = document. getElementById ("imgs ");
Var x, y, n = false;
Inner. onmousedown = test1; // if you change inner to document and click anywhere in the window, the image will follow
Document. onmousemove = test2; // if the document is changed to outer, the mouse takes effect in outer.
Document. onmouseup = test3;
Function test1 (event) {// how to press the mouse
Var event = event | window. event; // compatible with debugging. Events vary with browsers.
N = true; // when n = true (the value of n can be set at will), it is assumed that it is an event that is pressed by the mouse.
X = event. clientX-inner.offsetLeft; // relative abscissa of the mouse over the transparent layer = mouse coordinate-left margin of the square
Y = event. clientY-inner.offsetTop; // relative ordinate of the mouse over the transparent layer = mouse coordinate-margin on the square
}
Function test2 (event) {// how to move the cursor
Var event = event | window. event;
If (n = true ){
/////// Move the cursor over the range
Inner. style. left = event. clientX-x + "px ";
Inner. style. top = event. clientY-y + "px ";
/////// Picture moving range
Imgs. style. left =-4 * parseInt (inner. style. left) + "px ";
Imgs. style. top =-4 * parseInt (inner. style. top) + "px ";
//// // Specify the range of mouse movement
If (parseInt (inner. style. left) <0 ){
Inner. style. left = 0 + "px ";
}
If (parseInt (inner. style. top) <0 ){
Inner. style. top = 0 + "px ";
}
If (parseInt (inner. style. left)> outer. clientWidth-inner.clientWidth ){
Inner. style. left = outer. clientWidth-inner.clientWidth + "px ";
}
If (parseInt (inner. style. top)> outer. clientHeight-inner.clientHeight ){
Inner. style. top = outer. clientHeight-inner.clientHeight + "px ";
}
//// // Specify the range in which the image is moved
If (parseInt (imgs. style. left)> 0 ){
Imgs. style. left = 0 + "px ";
}
If (parseInt (imgs. style. top)> 0 ){
Imgs. style. top = 0 + "px ";
}
If (parseInt (imgs. style. left) <-4 * (outer. clientWidth-inner.clientWidth )){
Imgs. style. left =-4 * parseInt (outer. clientWidth-inner.clientWidth) + "px ";
}
If (parseInt (imgs. style. top) <-4 * (outer. clientHeight-inner.clientHeight )){
Imgs. style. top =-4 * parseInt (outer. clientHeight-inner.clientHeight) + "px ";
}
}
}
Function test3 () {// how to release the mouse
N = false;
}
</Script>
</Body>
</Html>
