jquery Plugin-Magnifier effects

One. html code:

<Divclass= "Demo">        <DivID= "box">            <DivID= "Small-box">                <DivID= "Float-box"></Div>                <imgsrc=".. /images/bimg_big.jpg "/>            </Div>            <DivID= "Big-box">                <imgsrc=".. /images/bimg_big.jpg "/>            </Div>        </Div></Div>

Store two Div in Div demo, where Small-box is used to store small images and magnifying glass areas, Big-box is used to store large images. The enlargement of the image is based on the small image of the magnifying glass position, to locate the large picture of the movement and display part of the area, to achieve amplification effect.

Two. JS Code

1. First the big picture is hidden, only when the mouse moves to the small picture, the magnifying glass area of the small figure shows, the large map corresponding area also displays

// mouse over display, move out hidden smallbox.hover (function() {floatbox.show (); Bigbox.show ();},function() { Floatbox.hide (); Bigbox.hide ();})

2. When the mouse moves on a small chart, the magnifying glass on the small map follows the movement

Smallbox.mousemove (function(EV) {        var _event=ev | | window.event;         var left=_event.clientx-box.offset (). Left-floatbox.width ()/2;        var top=_event.clienty-box.offset (). Top-floatbox.height ()/2;         floatbox.css (' left ', left+ ' px ');        Floatbox.css (' top ', top+ ' px ');    })

3. Calculate the displacement that the magnifying glass moves on the small chart, corresponding to the shift that the large picture should move. (Pictures and content from the screen)

// enlarge the position of a large image by moving the magnifying glass        var bigimgx=left/(Smallbox.width ()-floatbox.width ()) * (Bigboximg.width ()-bigbox.width ());        var bigimgy=top/(Smallbox.height ()-floatbox.height ()) * (Bigboximg.height ()-bigbox.height ());         bigboximg.css (' left ',-bigimgx+ ' px ');        Bigboximg.css (' top ',-bigimgy+ ' px ');

3. Limit the bounds of the magnifying glass area on the small chart, not beyond the range of the small map

if (left<0) {            left =0;        }         Else if (Left> (Smallbox.width ()-floatbox.width ())) {            left =smallbox.width ()-floatbox.width ();        }         if(top<0) {            top=0;        }         Else if (Top> (Smallbox.height ()-floatbox.height ())) {            top=smallbox.height ()-floatbox.height ();        }

Third, attach the jquery plugin-Magnifier effect source code

<!    DOCTYPE html>{margin:0; padding:0} img{Vertical-Align:top;            } #box {display:block;            width:400px;            height:255px;            margin:50px;            position:relative;        border:1px solid #ccc; } #small-box {position:relative; Z-index:1; }        #float-box {display:none;            width:160px;            height:120px;            Position:absolute;            Background: #ffffcc;            border:1px solid #ccc; Filter:alpha (Opacity=50); Opacity:0.5; } #big-box {display:none;            Position:absolute; Top:0;            left:460px;            width:400px;            height:300px;            Overflow:hidden;            border:1px solid #ccc; Z-index:1; } #big-box img {position:absolute; Z-index:5        }    </style> <script type= "Text/javascript" src= "jquery-1.7.2.min.js" ></script> <script type= "text /javascript "src=" demojq.js "></script>    $(function(){        $('. Demo '). Magnifier ({box:' #box ', Smallbox:' #small-box ', Floatbox:' #float-box ', BigBox:' #big-box ', bigboximg:' #big-box img '            }        )    })</script>HTML
$(function() {$.fn.magnifier=function(data) {varset={            ' Box ': '. Box ',            ' Smallbox ': '. Small-box ',            ' Floatbox ': '. Float-box ',            ' BigBox ': '. Big-box ',            ' Bigboximg ': '. Big-box img '        }        varobj=$.extend ({},set,data); //mouse over display, move out hidden$ (obj.smallbox). Hover (function() {$ (Obj.floatbox). Show ();            $ (Obj.bigbox). Show (); },            function() {$ (Obj.floatbox). Hide ();            $ (Obj.bigbox). Hide (); }        )        //Mouse Move Magnifier follows move$ (Obj.smallbox). MouseMove (function(EV) {var_event=ev | |window.event; varleft=_event.clientx-$ (Obj.box). Offset (). left-$ (Obj.floatbox). Width ()/2;vartop=_event.clienty-$ (Obj.box). Offset (). top-$ (Obj.floatbox). Height ()/2;if(left<0) { left=0; }            Else if(Left> ($ (obj.smallbox). Width ()-$ (obj.floatbox). Width ())) { Left=$ (Obj.smallbox). Width ()-$ (obj.floatbox). width (); }            if(top<0) {Top=0; }            Else if(Top> ($ (obj.smallbox). Height ()-$ (obj.floatbox). Height ())) {Top=$ (obj.smallbox). Height ()-$ (obj.floatbox). Height (); } $ (Obj.floatbox). CSS (' Left ', left+ ' px '); $ (obj.floatbox). CSS (' Top ', top+ ' px '); //enlarge the position of a large image by moving the magnifying glass            varbigimgx=left/($ (obj.smallbox). Width ()-$ (obj.floatbox). Width ()) * ($ (obj.bigboximg). Width ()-$ (obj.bigbox). Width () );varbigimgy=top/($ (obj.smallbox). Height ()-$ (obj.floatbox). Height ()) * ($ (obj.bigboximg). Height ()-$ (Obj.bigbox). Height ());$ (obj.bigboximg). CSS (' Left ',-bigimgx+ ' px '); $ (obj.bigboximg). CSS (' Top ',-bigimgy+ ' px '); })    }})
JS
Four, note: (Magnifying area/small picture) = (enlarged area/large picture), so you can calculate the size of the large picture according to the small picture, magnifying glass area and enlargement area, so as to enlarge the scale
jquery Plugin-Magnifier effects