Luce Digitale/JQ Sunny Magnifier – Basic
<!DOCTYPE html> <html> <!-- Luce Digitale/JQ Sunny Magnifier --> <!-- Author: Andrea Tonin - http://blog.lucedigitale.com --> <!-- This code come with absolutely no warranty --> <!-- If you use this code in your project please give a link to http://blog.lucedigitale.com --> <!-- Thanks in advance --> <head> <title>Luce Digitale/JQ Sunny Magnifier - Base</title> <style type="text/css" media="screen"> /* sunnymagnifier container style START */ #sunnymagnifier { width: 400px; height: 400px; /* Image Container - width and height of the small image */ margin:0 auto; border:3px solid #CECECE; background: url(css/images-gimme-code-2013-0043/img-big-800x800.jpg) repeat 0 0; /* The big image is the background image */ background-position: 0px 0px; /* Chrome IE Firefox work well */ } /* sunnymagnifier container style END */ </style> <script type="text/javascript" src="js/jquery-2.0.3.js"></script> <script> $(document).ready(function(){ // Magnifier on mouse move START ######### $('#sunnymagnifier').mousemove(function(e){ // Hide the small image $("#smallImg").css({'opacity': 0}) // Get mouse cursor position within element var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; // Debug Code for Cursor position - Hide if you do not need it $('#CursorPosition').html("Within element - X Axis : " + mouseX + " Y Axis : " + mouseY); // Move the big image var bigImgPosx = 0 - mouseX; var bigImgPosy = 0 - mouseY; // Firefox 24 does not support 'background-position-x' and 'background-position-y' so we have to split 'background-position' values by javascript // Create the value for css 'background-position' as -> 0px 0px var bigImgPos = bigImgPosx +'px' + ' ' + bigImgPosy +'px'; $("#sunnymagnifier").css({'background-position': bigImgPos}) }); // Magnifier on mouse move END ########### // Stop Magnifier on mouse leave START ########## $("#sunnymagnifier").mouseleave(function(){ // Show the small image $("#smallImg").css({'opacity': 1}) }); // Stop Magnifier on mouse leave END ############ }); </script> </head> <body> <p>Luce Digitale/JQ Sunny Magnifier</p> <div id="CursorPosition"> </div> <div id="sunnymagnifier"> <img id="smallImg" src="css/images-gimme-code-2013-0043/img-small-400x400.jpg"> </div> </body> </html>DEMO