evenZoom magnifying glass
evenZoom is a plug-in mirror, mall Zoom function can be achieved.
Download github address is https://github.com/no1lov3sme/evenZoom
JQuery Web site and then download style: http://code.jquery.com/jquery-1.6.3.min.js
The first step: the introduction of jQuery
1 <script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
Step two: the introduction of Zoom.css
1 <link rel="stylesheet" type="text/css" href="css/evenZoom.css" />
Introduced Zoom.js
2 <script type="text/javascript" src="js/evenZoom.js"></script>
Step Three: Add data scaling, property #example
1 <div id="example" data-zoomed="img/img-zoomed.jpg"> 2 <img src="img/img-original.jpg" alt="Example" /> 3 </div>
The fourth step: initialization selector uniform scaling #example
1 $(function() { 2 $("#example").evenZoom(); 3 });
Complete code:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>放大镜</title> 6 <link rel="stylesheet" type="text/css" href="css/evenZoom.css" /> 7 </head> 8 <body> 9 <!--数据缩放--> 10 <div id="example" data-zoomed="img/img-zoomed.jpg"> 11 <img src="img/img-original.jpg" alt="Example" /> 12 </div> 13 14 <script type="text/javascript" src="js/jquery-1.6.3.min.js"></script> 15 <script type="text/javascript" src="js/evenZoom.js"></script> 16 17 <script> 18 $(function(){ 19 $("#example").evenZoom(); 20 }); 21 </script> 22 </body> 23 </html>
Note: All js code jquery plugins should be placed behind the jquery.js
Results are as follows:
