Home > Developer > JavaScript
The effect is as follows:
Let's take a look at our demo. Refresh the code once:
<Html> <pead> <title> JQzoom Demo </title> <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> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
To achieve this effect, you only need to add:
Copy codeThe Code is 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 images that require this effect:
Copy codeThe Code is as follows:
<A href = "upload/bimg/2.jpg" class =" jqzoom "title =" Search "> </a>
Class = "jqzoom" is the key.
Its attribute settings include:
You can also directly view the original article: http://www.mind-projects.it/projects/jqzoom/index.php#examples
You may be interested to see the author carefully prepared example: http://www.mind-projects.it/projects/jqzoom/demos.php#demo1
Package
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
