<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<script src= ". /jquery-1.8.3.min.js "type=" Text/javascript "></script>
<style type= "Text/css" >
Body {
margin:0
}
. imgdiv {
position:relative;
width:384px;
height:240px;
}
. imgdiv img {
width:100%;
height:100%;
}
. zoomdiv {
Position:absolute;
Background: #000;
Opacity:. 3;
Filter:alpha (opacity=30);
-moz-opacity:0.3;
-khtml-opacity:0.3;
}
. rangediv {
Position:absolute;
left:0;
top:0;
}
. rangediv img {
width:100%;
}
. imgbox {
Position:absolute;
left:600px;
top:10px;
Overflow:hidden;
}
. imgbox img {
Position:absolute;
left:0;
top:0
}
. imgDiv2 {
position:relative;
width:384px;
height:240px;
Cursor:crosshair;
margin-top:50px;
margin-left:100px;
}
. zoomglass {
Position:absolute;
left:0;
top:0;
Display:none;
Background:url (big.jpg);
Overflow:hidden;
border-radius:50%;
/*box-shadow:1px 1px 1px #eee, -1px-1px 1px #eee; */
}
. imgDiv2 img {
width:100%;
Border:none;
Vertical-align:bottom;
Display:block;
}
</style>
<body>
<div id= "Imgdiv" class= "Imgdiv" >
</div>
<div id= "" class= "Imgbox" ></div>
<div id= "ImgDiv2" class= "ImgDiv2" >
<div class= "Zoomglass" ></div>
</div>
</body>
<script type= "Text/javascript" >
/*===================================
* CREATETIME:2016/11/14
* version:1.0
* Modify: {}
*arguements:{zoomdom:,w:,h:,range:,style: Enlarge style} Enlarge image's parent element/magnifying glass, size of mask, magnification
* Description: The size of the picture frame is proportional to the picture,
===================================*/
(function ($) {
$.fn.imgzoom = function (options) {
Default parameters
var defualts = {
w:200,//thickness of the mask
h:200,//height of the mask
Range:2,
Zoomdom: ' #imgBox ',
Style:1
}
var opts = $.extend ({}, Defualts, options);
var consts = {};
var = $ (this);
var imgboxdom = $ (opts.zoomdom);
var zoomimg = ';
var imgload = false;
var img = new Image ();
Return This.each (function () {
That.hover (function () {
function e (t) {
This.x = T.pagex, This.y = T.pagey
}
var _this = $ (this);
var src = _this.find ("img"). attr (' data-img '),
left = _this.offset (). Left,
top = _this.offset (). Top;
if (Opts.style = = 1) {
zoomimg = $ (' <div class= "Rangediv" ></div> ');
var zoomdiv = $ (' <div class= ' zoomdiv ' ></div> ');
Zoomdiv.appendto (that). Width (opts.w + ' px '). Height (opts.h + ' px ');
} else {
Imgboxdom.width (OPTS.W). Height (opts.h). Show ();
zoomimg = $ (' ");
Zoomimg.width (consts.midwidth * opts.range + ' px '). Height (consts.midheight * opts.range + ' px ')
Zoomimg.appendto (Imgboxdom);
}
IMG.SRC = src;
if (imgload) {
$ ('. Zoomimg '). attr (' src ', src);
} else {
Img.onload = function () {
$ ('. Zoomimg '). attr (' src ', src);
Imgload = true;
}
}
Get wide Height
Consts = {
Midwidth:that.width (),
Midheight:that.height (),
Bigwidth: (OPTS.W) * Opts.range,
Bigheight: (opts.h) * Opts.range
}
Set width height
Zoomimg.width (consts.midwidth * opts.range + ' px '). Height (consts.midheight * opts.range + ' px ')
Imgboxdom.append (ZOOMIMG);
if (Opts.style = = 1) {
Enlarge the div size of the graph
Imgboxdom.width (consts.bigwidth + ' px '). Height (consts.bigheight + ' px ');
var MinX = OPTS.W/2,
MaxX = CONSTS.MIDWIDTH-OPTS.W/2,
Miny = OPTS.H/2,
Maxy = CONSTS.MIDHEIGHT-OPTS.H/2;
} else {
var MinX = OPTS.W/(Opts.range * 2),
MaxX = CONSTS.MIDWIDTH-OPTS.W/(Opts.range * 2),
Miny = opts.h/(Opts.range * 2),
Maxy = consts.midheight-opts.h/(Opts.range * 2);
}
_this.on (' MouseMove ', function (event) {
var mouse = new E (event);
var r = 2/(opts.range-1)
if (Opts.style = = 1) {
var zleft = Zoomdiv.offset (). Left-left,
Ztop = Zoomdiv.offset (). Top-top;
} else {
var zleft = MOUSE.X-LEFT-OPTS.W/2,
Ztop = MOUSE.Y-TOP-OPTS.H/2;
}
var PageX = Mouse.x-left,
Pagey = Mouse.y-top;
Judging the extent of the layer of the mask
if (PageX < MaxX) {
PageX = PageX < MinX? Minx:pagex
} else {
PageX = PageX > MaxX? Maxx:pagex
}
if (Pagey < Miny) {
Pagey = Pagey < miny? Miny:pagey
} else {
Pagey = pagey > Maxy? Maxy:pagey
}
var Zlocationx = PAGEX-OPTS.W/2,
Zlocationy = PAGEY-OPTS.H/2;
if (Opts.style = = 1) {
Zoomdiv.css ({
Left:zlocationx,
Top:zlocationy
});
Zoomimg.css ({
Left:-zleft * opts.range + ' px ',
Top:-ztop * opts.range + ' px '
})
} else {
Imgboxdom.css ({
Left:zlocationx,
Top:zlocationy,
});
Imgboxdom.animate ({
Scrollleft:zleft * Opts.range + opts.w/r,
Scrolltop:ztop * Opts.range + opts.h/r
}, 0);
}
});
}, function () {
if (Opts.style = = 1) {
$ ('. Zoomdiv '). Remove ();
$ ('. Rangediv '). Remove ();
} else {
Imgboxdom.hide ();
Zoomimg.remove ();
}
});
});
}
}) (JQuery);
$ (' #imgDiv '). Imgzoom ({
Range:5,
W:200,
H:200,
Zoomdom: '. Imgbox '
});
$ (' #imgDiv2 '). Imgzoom ({
Range:5,
W:300,
H:300,
Zoomdom: '. Zoomglass ',
Style:2
});
</script>
jquery-based Magnifier plug-in