This article is to use the jquery image Magnifier effect plug-in to the example image amplification, below we have collected three examples of effects, see that the appropriate for you OH.
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> three jquery picture Magnifier effect Code </title>
<script type= "text/web Effects" >$ (function () {
var options3 =
{
ZOOMWIDTH:200,
ZOOMHEIGHT:200,
XOFFSET:20,
Title:false,
Lens:false}
$ (". Jqzoom"). Jqzoom (OPTIONS3);
});
</script><body>
<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>And then introduce a CSS tutorial
<link rel= "stylesheet" href= ". /css/jqzoom.css "type=" Text/css ">
And then there are two big pictures and small graphs.
<a href= "kawasakigreen.jpg" class= "Jqzoom" style= "title=" Kawasaki ">
</a>
Notice here is a big picture, a small picture, and "kawasakigreen_small.jpg" this small figure, that title is to appear in the magnifying glass text title
</body>
Example Two
<!doctype HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=iso-8859-1 ">
<title>magnifier</title>
<script src= "Http://code.jquery.com/jquery-latest.js" ></script>
<script type= "Text/javascript" >
var Magnifier = {Imgurl:null,
Imgcontainer:null,
Imgscale:null,Init:function (Url,imagecontainer,scale)
{
This.imgurl = URL;
This.imgscale = scale;
This.imgcontainer = Imagecontainer;var browserdiv = document.createelement (' div ');
jquery (browserdiv)
attr (' id ', ' imagebrowser ')
. CSS (
{
position: ' Absolute ',
border : ' 1px #000 solid ',
zindex :
}
). Hide ();
Imagecontainer.append (browserdiv);var bigimagediv = document.createelement (' div ');
jquery (bigimagediv)
attr (' id ', ' bigimagediv ')
. CSS (
{
overflow : ' Hidden ',
position : ' absolute ',
border : ' 1px #000 solid ',
zindex :
}
). Hide ();
jquery (' body '). Append (bigimagediv);var bigimage = document.createelement (' img ');
jquery (Bigimage)
. attr (
{
ID: ' Bigimage ',
Src:url
}
)
. CSS (
{
Position: ' Absolute '
}
);
jquery (' #bigimagediv '). Append (Bigimage);Imagecontainer.mousemove (Magnifier.start);
Imagecontainer.mouseo tutorial UT (magnifier.end);
},Start:function (e)
{
E = Magnifier.fixe (e);
var scale = Magnifier.imgscale;
var x = Magnifier.getmouse (e). x;
var y = Magnifier.getmouse (e). Y;
var browserdivw = jquery (' #magnifier img '). width ()/scale;
var browserdivh = jquery (' #magnifier img '). Height ()/scale;
var positionimage = Magnifier.imgcontainer.offset ();
var browserdivt = y-browserdivh/2-positionimage.top;
var BROWSERDIVL = x-browserdivw/2-Positionimage.left;
if (browserdivt <= 0) browserdivt = 0;
if (BROWSERDIVL <= 0) browserdivl = 0;
if (browserdivt >= magnifier.imgcontainer.height ()-browserdivh-2) {
BROWSERDIVT = Magnifier.imgcontainer.height ()-browserdivh-2;
};
if (Browserdivl >= magnifier.imgcontainer.width ()-browserdivw-2) {
BROWSERDIVL = Magnifier.imgcontainer.width ()-browserdivw-2;
};
jquery (' #imagebrowser ')
. CSS (
{
WIDTH:BROWSERDIVW + ' px ',
HEIGHT:BROWSERDIVH + ' px ',
TOP:BROWSERDIVT + ' px ',
LEFT:BROWSERDIVL + ' px '
}
);
jquery (' #imagebrowser: Hidden '). Show ();jquery (' #bigimagediv ')
. CSS (
{
Width:magnifier.imgcontainer.innerwidth () + ' px ',
Height:magnifier.imgcontainer.innerheight () + ' px ',
Top:p ositionimage.top + ' px ',
Left:p Ositionimage.left + magnifier.imgcontainer.width () + + ' px '
}
);
jquery (' #bigimagediv: Hidden '). Show ();
jquery (' #bigimage ')
. CSS (
{
Width:magnifier.imgcontainer.innerwidth () *scale + ' px ',
Height:magnifier.imgcontainer.innerheight () *scale + ' px ',
Top:-(jquery (' #imagebrowser '). Offset (). top-positionimage.top) * scale + ' px ',
Left:-(jquery (' #imagebrowser '). Offset (). left-positionimage.left) * scale + ' px '
}
);
},End:function (e)
{
E = Magnifier.fixe (e);
var toobj = e? E.relatedtarget:event.toelement;
if (toobj.tagname = "div" | | toobj = = this)
{
Return
};
jquery (' #imagebrowser '). Hide ();
jquery (' #bigimagediv '). Hide ();
},Fixe:function (e)
{
if (typeof e = = ' undefined ')
{
e = window.event;
E.target = e.srcelement;
E.layerx = E.offsetx;
E.layery = e.offsety;
}
return e;
},Getmouse:function (e)
{
e=e| | window.event;
return pointer = {
X:e.pagex | | (E.clientx + (Document.documentelement.scrollleft | | document.body.scrollleft)),
Y:e.pagey | | (E.clienty + (Document.documentelement.scrolltop | | document.body.scrolltop))
};
}
}jquery (document). Ready (function () {
Magnifier.init ("Catch/2008/2/20/1203479158450.jpg", jquery (' #magnifier '), 5);
});
</script>
<style>
#magnifier {
width:300px;
height:400px;
Position:absolute;
top:100px;
left:100px;
}
#magnifierimg {
width:300px;
height:400px;
}
</style>
<body>
<div id= "Magnifier" >
</div>
</body>
jquery Image Amplification Effect Three
Image Power Zoomer is a good effect based on the jquery image Magnifier, the mouse when the picture is moving to display a magnified picture of the local, but also the need to use the mouse wheel to adjust the magnification. The code calls simple, only needs two JS files, the picture simply adds a class class to be able.
1. Code in the
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></ Script><script type= "Text/javascript" src= "ddpowerzoomer.js" ></script><script type= "text/" JavaScript ">jquery (document). Ready (function ($) {//fire on Dom ready $ (' Img#gallerya '). Addpowerzoom ({ MAGNIFIERSIZE:[100,100]}) $ (' Img.gallery '). Addpowerzoom ({powerrange:[2,5]})} </script>2. In <body> Area Picture code example
pictures only need to join class= "gallery
"Class can be.
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
