Jqery Magnifier Effect

Simple 2:1 magnification

<!        DOCTYPE html>{margin:0; padding:0;        } img{Display:block;                } #pic {width:200px;                height:160px;                BORDER:3PX solid #ccc;                position:relative; float: Left;                } #pic img{width:200px;            height:160px;                }. mirror{width:100px;                height:80px;                Background:gold; Opacity:.5;                Position:absolute; Left:0; Top:0;            Display:none;                } #bigbox {width:200px;                height:160px; float: Left;                BORDER:3PX solid #ccc;                Overflow:hidden;            position:relative;            } #bigbox img{Position:absolute; }        </style> <script src= "Http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script> &LT;SCRI PT type= "Text/javascript" >            $(function(){                    $(' #pic '). On ({mousemove:function(e) {$ ('. Mirror '). CSS (' Display ', ' block ')                            //gets the offset value of the current mouse-down position relative to box                            var_left = E.clientx-$ (' #pic '). Offset (). Left-$ ('. Mirror '). Width ()/2;var_top = E.clienty-$ (' #pic '). Offset (). Top-$ ('. Mirror '). Height ()/2;//judgment cannot go beyond the bounds                            if(_left<0) {_left= 0                            }                            if(_left>=$ (' #pic '). Width ()-$ ('. Mirror ')). Width ()) {_left=$ (' #pic '). Width ()-$ ('. Mirror ')). Width ()}if(_top<0) {_top= 0                            }                            if(_top>=$ (' #pic '). Height ()-$ ('. Mirror ')). Height ()) {_top= $ (' #pic '). Height ()-$ ('. Mirror ')). Height ()}//move the mouse in box to change the position of the magnifying glass($ ('. Mirror ')). css ({' Left ': _left, ' top ': _top}) //based on the position of the magnifying glass, figure out which part of the right large image should be displayed$ (' #img1 '). css ({' Left ':-$ ('. Mirror '). Position (). Left * 2, ' top ':-$ ('. Mirror '). Position (). Top * 2})                        },                        //when the mouse is removed, the Magnifier hidesMouseLeave:function(){                            $('. Mirror '). CSS (' Display ', ' none '))                                                    }                    })                })        </script> 
Jqery Magnifier Effect