Web page Common dynamic effect--magnifying glass

HTML code:

Div.box>span+div

CSS code:

box relative positioning, span in box absolute positioning, div absolute positioning beyond its own width

. Box{width:350px;Height:350px;background:URL (images/xiaotu.jpg) 0 0 no-repeat;margin:100px;Border:1px solid #000;position:relative; }. Box span{width:150px;Height:150px;background:Red;position:Absolute; Left:0;Top:0;Opacity:0.3;cursor:Move;Display:None; }. Box Div{width:400px;Height:400px;background:URL (images/datu.jpg) 0 0 no-repeat;Border:1px solid #000;position:Absolute; Right:-420px;Top:0;Display:None; }

JQ Code:

<script>//drag and drop span in box and correspond to coordinates in the div map based on span drag coordinates$(function(){                varDivX = $ ('. Box '). Offset (). Left; varDivy = $ ('. Box ')). Offset (). Top; varW1 = $ (' span '). width (); varH1 = $ (' span '). Height (); varW2 = $ ('. Box ')). width (); varH2 = $ ('. Box ')). Height (); $('. Box '). MouseOver (function(Event) {$ ('. Box Span,.box div '). Show (); //Mouse Movement$ ('. Box '). MouseMove (function(event) {//get mouse coordinates                        varMX =Event.pagex; varmy =Event.pagey; //Drag Point                        varx = mx-divx-75; vary = my-divy-75; if(x<0) {x=0; }                        if(y<0) {y=0; }                        if(x>w2-W1) {x=w2-W1; }                        if(y>h2-H1) {y=h2-H1; }                        //coordinates corresponding to the div background                        varPosX = 800*x/350;varPosY = 800*y/350; $ (' span '). css ({left:x,top:y}); $('. Box Div '). css ({backgroundposition: (-POSX) + ' px ' + (-posy) + ' px '                        });                });                }); //The event disappears when you leave box$ ('. Box '). Mouseout (function(Event) {$ ('. Box Span,.box div '). Hide ();            }); })        </script>

Web page Common dynamic effect--magnifying glass