The effect is as follows:
Take a look at our demo, "Run code" please refresh once:
<textarea id="runcode50249"><ptml> <pead> <title>jqzoom demo</title> <script src= "http://img.jb51.net/online/ Jqzoom/js/jquery-1.3.2.min.js "type=" Text/javascript "></script> <script src=" http://img.jb51.net/ Online/jqzoom/js/jqzoom.pack.1.0.1.js "type=" Text/javascript "></script> <link rel=" stylesheet "href=" Http://img.jb51.net/online/jqzoom/css/jqzoom.css "type=" text/css "> <style type" text/css "> div.notes{font- size:12px; Div.notes a{color: #990000; } </style> <script type= "Text/javascript" > $ (Function () {$ (". Jqzoom"). Jqzoom (); }); </script> </pead> <body> </body></ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
To do this, just add to the area of the page where you want this effect:
Copy Code code as follows:
<link rel= "stylesheet" type= "Text/css" href= "Css/jqzoom.css"/>
<script src= "Js/jquery-1.3.2.min.js" type= "Text/javascript" ></script>
<script src= "Js/jqzoom.pack.1.0.1.js" type= "Text/javascript" ></script>
<script language= "javascript" type= "Text/javascript" >
$ (function () {
var option =
{
ZOOMWIDTH:350,
zoomheight:260,
Lens:true,
XOFFSET:20,
Yoffset:-1,
Positon: "Left",
Title:false
}
$ (". Jqzoom"). Jqzoom (option);
});
</script>
For pictures that need this effect:
Copy Code code as follows:
<a href= "upload/bimg/2.jpg" class= "Jqzoom" title= "Search bar" ></a>
Class= "Jqzoom" is the key.
And its property settings include:
You can also view the original article directly: http://www.mind-projects.it/projects/jqzoom/index.php
You may be interested in looking at the example carefully prepared by the author: http://www.mind-projects.it/projects/jqzoom/demos.php
Package Download Address
