jQuery实现图片局部放大镜效果

.zoomPad{
position:relative;
float:left;
z-index:99;
cursor:crosshair;
}
.zoomPreload{
-moz-opacity:0.8;
opacity: 0.8;
filter: alpha(opacity = 80);
color: #333;
font-size: 12px;
font-family: Tahoma;
text-decoration: none;
border: 1px solid #CCC;
padding: 8px;
text-align:center;
background-image: url(../images/zoomloader.gif);
background-repeat: no-repeat;
background-position: 43px 30px;
z-index:110;
width:90px;
height:43px;
position:absolute;
:0px;
left:0px;
 width:100px;
 height:49px;
}
.zoomPup{
overflow:hidden;
-moz-opacity:0.6;
opacity: 0.6;
filter: alpha(opacity = 60);
z-index:120;
position:absolute;
border:1px solid #CCC;
z-index:101;
cursor:crosshair;
}
.zoomOverlay{
position:absolute;
left:0px;
:0px;
/opacity:0.5;/
z-index:5000;
width:100%;
height:100%;
display:none;
z-index:101;
}
.zoomWindow{
position:absolute;
left:110%;
:40px;
z-index:6000;
height:auto;
z-index:10000;
z-index:110;
}
.zoomWrapper{
position:relative;
border:1px solid #999;
z-index:110;
}
.zoomWrapperTitle{
display:block;
background:#999;
color:#FFF;
height:18px;
line-height:18px;
width:100%;
overflow:hidden;
text-align:center;
font-size:10px;
position:absolute;
:0px;
left:0px;
z-index:120;
-moz-opacity:0.6;
opacity: 0.6;
filter: alpha(opacity = 60);
}
.zoomWrapperImage{
display:block;
position:relative;
overflow:hidden;
z-index:110;
}
.zoomWrapperImage img{
border:0px;
display:block;
position:absolute;
z-index:101;
}
.zoomIframe{
z-index: -1;
filter:alpha(opacity=0);
-moz-opacity: 0.80;
opacity: 0.80;
position:absolute;
display:block;
}
/
/ When clicking on thumbs jqzoom will add the class
/ "zoomThumbActive" on the anchor selected
// 

/!
 jQzoom Evolution Library v2.3 - Javascript Image magnifier
 http://.mind-projects.it

 Copyright 2011, Engineer Marco Renzi
 Licensed under the BSD license.

 Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are met:
  Redistributions of source code must retain the above copyright
 notice, this list of conditions and the following disclaimer.
  Redistributions in binary form must reproduce the above copyright
 notice, this list of conditions and the following disclaimer in the
 documentation and/or other materials provided with the distribution.
  Neither the name of the anization nor the
 names of its contributors may be used to endorse or promote products
 derived from this software without specific prior written permission.

 Date: 03 May 2011 22:16:00
/
(function ($) {
//GLOBAL VARIABLES
var isIE6 = ($.browser.msie && $.browser.version < 7);
var body = $(document.body);
var window = $(window);
var jqzoompluging_disabled = false; //disabilita globalmente il plugin
$.fn.jqzoom = function (options) {
return this.each(function () {
var node = this.nodeName.toLowerCase();
if (node == 'a') {
new jqzoom(this, options);
}
});
};
jqzoom = function (el, options) {
var api = null;
api = $(el).data("jqzoom");
if (api) return api;
var obj = this;
var settings = $.extend({}, $.jqzoom.defaults, options || {});
obj.el = el;
el.rel = $(el).attr('rel');
//ANCHOR ELEMENT
el.zoom_active = false;
el.zoom_disabled = false; //to disable single zoom instance
el.largeimageloading = false; //tell us if large image is loading
el.largeimageloaded = false; //tell us if large image is loaded
el.scale = {};
el.timer = null;
el.mousepos = {};
el.mouseDown = false;
$(el).css({
'outline-style': 'none',
'text-decoration': 'none'
});
//BASE IMAGE
var img = $("img:eq(0)", el);
el.title = $(el).attr('title');
el.imagetitle = img.attr('title');
var zoomtitle = ($.trim(el.title).length > 0) ? el.title : el.imagetitle;
var smallimage = new Smallimage(img);
var lens = new Lens();
var stage = new Stage();
var largeimage = new Largeimage();
var loader = new Loader();
//preventing default click,allowing the onclick event [exmple: lightbox]
$(el).bind('click', function (e) {
e.preventDefault();
return false;
});
//setting the default zoomType if not in settings
var zoomtypes = ['standard', 'drag', 'innerzoom', 'reverse'];
if ($.inArray($.trim(settings.zoomType), zoomtypes) < 0) {
settings.zoomType = 'standard';
}
$.extend(obj, {
create: function () { //create the main objects
//create ZoomPad
if ($(".zoomPad", el).length == 0) {
el.zoomPad = $('<div/>').addClass('zoomPad');
img.wrap(el.zoomPad);
}
if(settings.zoomType == 'innerzoom'){
settings.zoomWidth = smallimage.w;
settings.zoomHeight = smallimage.h;
}
//creating ZoomPup
if ($(".zoomPup", el).length == 0) {
lens.append();
}
//creating zoomWindow
if ($(".zoomWindow", el).length == 0) {
stage.append();
}
//creating Preload
if ($(".zoomPreload", el).length == 0) {
loader.append();
}
//preloading images
if (settings.preloadImages || settings.zoomType == 'drag' || settings.alwaysOn) {
obj.load();
}
obj.init();
},
init: function () {
//drag option
if (settings.zoomType == 'drag') {
$(".zoomPad", el).mousedown(function () {
el.mouseDown = true;
});
$(".zoomPad", el).mouseup(function () {
el.mouseDown = false;
});
document.body.ondragstart = function () {
return false;
};
$(".zoomPad", el).css({
cursor: 'default'
});
$(".zoomPup", el).css({
cursor: 'move'
});
}
if (settings.zoomType == 'innerzoom') {
$(".zoomWrapper", el).css({
cursor: 'crosshair'
});
}
$(".zoomPad", el).bind('mouseenter mouseover', function (event) {
img.attr('title', '');
$(el).attr('title', '');
el.zoom_active = true;
//if loaded then activate else load large image
smallimage.fetchdata();
if (el.largeimageloaded) {
obj.activate(event);
} else {
obj.load();
}
});
$(".zoomPad", el).bind('mouseleave', function (event) {
obj.deactivate();
});
$(".zoomPad", el).bind('mousemove', function (e) {
//prevent fast mouse mevements not to fire the mouseout event
if (e.pageX > smallimage.pos.r || e.pageX < smallimage.pos.l || e.pageY < smallimage.pos.t || e.pageY > smallimage.pos.b) {
lens.setcenter();
return false;
}
el.zoom_active = true;
if (el.largeimageloaded && !$('.zoomWindow', el).is(':visible')) {
obj.activate(e);
}
if (el.largeimageloaded && (settings.zoomType != 'drag' || (settings.zoomType == 'drag' && el.mouseDown))) {
lens.setposition(e);
}
});
var thumb_preload = new Array();
var i = 0;
//binding click event on thumbnails
var thumblist = new Array();
thumblist = $('a').filter(function () {
var regex = new RegExp("gallery[\\s]:[\\s]'" + $.trim(el.rel) + "'", "i");
var rel = $(this).attr('rel');
if (regex.test(rel)) {
return this;
}
});
if (thumblist.length > 0) {
//getting the first to the last
var first = thumblist.splice(0, 1);
thumblist.push(first);
}
thumblist.each(function () {
//preloading thumbs
if (settings.preloadImages) {
var thumb_options = $.extend({}, eval("(" + $.trim($(this).attr('rel')) + ")"));
thumb_preload[i] = new Image();
thumb_preload[i].src = thumb_options.largeimage;
i++;
}
$(this).click(function (e) {
if($(this).hasClass('zoomThumbActive')){
return false;
}
thumblist.each(function () {
$(this).removeClass('zoomThumbActive');
});
e.preventDefault();
obj.swapimage(this);
return false;
});
});
},
load: function () {
if (el.largeimageloaded == false && el.largeimageloading == false) {
var url = $(el).attr('href');
el.largeimageloading = true;
largeimage.loadimage(url);
}
},
activate: function (e) {
clearTimeout(el.timer);
//show lens and zoomWindow
lens.show();
stage.show();
},
deactivate: function (e) {
switch (settings.zoomType) {
case 'drag':
//nothing or lens.setcenter();
break;
default:
img.attr('title', el.imagetitle);
$(el).attr('title', el.title);
if (settings.alwaysOn) {
lens.setcenter();
} else {
stage.hide();
lens.hide();
}
break;
}
el.zoom_active = false;
},
swapimage: function (link) {
el.largeimageloading = false;
el.largeimageloaded = false;
var options = new Object();
options = $.extend({}, eval("(" + $.trim($(link).attr('rel')) + ")"));
if (options.smallimage && options.largeimage) {
var smallimage = options.smallimage;
var largeimage = options.largeimage;
$(link).addClass('zoomThumbActive');
$(el).attr('href', largeimage);
img.attr('src', smallimage);
lens.hide();
stage.hide();
obj.load();
} else {
alert('ERROR :: Missing parameter for largeimage or smallimage.');
throw 'ERROR :: Missing parameter for largeimage or smallimage.';
}
return false;
}
});
//sometimes image is already loaded and onload will not fire
if (img[0].plete) {
//fetching data from sallimage if was previously loaded
smallimage.fetchdata();
if ($(".zoomPad", el).length == 0) obj.create();
}
/========================================================,
| Smallimage
|---------------------------------------------------------:
| Base image into the anchor element
`========================================================/
function Smallimage(image) {
var $obj = this;
this.node = image[0];
this.findborder = function () {
var border = 0;
border = image.css('border--width');
b = '';
var borderleft = 0;
borderleft = image.css('border-left-width');
bleft = '';
if (border) {
for (i = 0; i < 3; i++) {
var x = [];
x = border.substr(i, 1);
if (isNaN(x) == false) {
b = b + '' + border.substr(i, 1);
} else {
break;
}
}
}
if (borderleft) {
for (i = 0; i < 3; i++) {
if (!isNaN(borderleft.substr(i, 1))) {
bleft = bleft + borderleft.substr(i, 1)
} else {
break;
}
}
}
$obj.b = (b.length > 0) ? eval(b) : 0;
$obj.bleft = (bleft.length > 0) ? eval(bleft) : 0;
};
this.fetchdata = function () {
$obj.findborder();
$obj.w = image.width();
$obj.h = image.height();
$obj.ow = image.outerWidth();
$obj.oh = image.outerHeight();
$obj.pos = image.offset();
$obj.pos.l = image.offset().left + $obj.bleft;
$obj.pos.t = image.offset(). + $obj.b;
$obj.pos.r = $obj.w + $obj.pos.l;
$obj.pos.b = $obj.h + $obj.pos.t;
$obj.rightlimit = image.offset().left + $obj.ow;
$obj.bottomlimit = image.offset(). + $obj.oh;
};
this.node.onerror = function () {
alert('Problems while loading image.');
throw 'Problems while loading image.';
};
this.node.onload = function () {
$obj.fetchdata();
if ($(".zoomPad", el).length == 0) obj.create();
};
return $obj;
};
/========================================================,
| Loader
|---------------------------------------------------------:
| Show that the large image is loading
`========================================================/
function Loader() {
var $obj = this;
this.append = function () {
this.node = $('<div/>').addClass('zoomPreload').css('visibility', 'hidden').html(settings.preloadText);
$('.zoomPad', el).append(this.node);
};
this.show = function () {
this.node. = (smallimage.oh - this.node.height()) / 2;
this.node.left = (smallimage.ow - this.node.width()) / 2;
//setting position
this.node.css({
: this.node.,
left: this.node.left,
position: 'absolute',
visibility: 'visible'
});
};
this.hide = function () {
this.node.css('visibility', 'hidden');
};
return this;
}
/========================================================,
| Lens
|---------------------------------------------------------:
| Lens over the image
`========================================================/
function Lens() {
var $obj = this;
this.node = $('<div/>').addClass('zoomPup');
//this.nodeimgwrapper = $("<div/>").addClass('zoomPupImgWrapper');
this.append = function () {
$('.zoomPad', el).append($(this.node).hide());
if (settings.zoomType == 'reverse') {
this.image = new Image();
this.image.src = smallimage.node.src; // fires off async
$(this.node).empty().append(this.image);
}
};
this.setdimensions = function () {
this.node.w = (parseInt((settings.zoomWidth) / el.scale.x) > smallimage.w ) ? smallimage.w : (parseInt(settings.zoomWidth / el.scale.x)); 
this.node.h = (parseInt((settings.zoomHeight) / el.scale.y) > smallimage.h ) ? smallimage.h : (parseInt(settings.zoomHeight / el.scale.y)); 
this.node. = (smallimage.oh - this.node.h - 2) / 2;
this.node.left = (smallimage.ow - this.node.w - 2) / 2;
//centering lens
this.node.css({
: 0,
left: 0,
width: this.node.w + 'px',
height: this.node.h + 'px',
position: 'absolute',
display: 'none',
borderWidth: 1 + 'px'
});
if (settings.zoomType == 'reverse') {
this.image.src = smallimage.node.src;
$(this.node).css({
'opacity': 1
});
$(this.image).css({
position: 'absolute',
display: 'block',
left: -(this.node.left + 1 - smallimage.bleft) + 'px',
: -(this.node. + 1 - smallimage.b) + 'px'
});
}
};
this.setcenter = function () {
//calculating center position
this.node. = (smallimage.oh - this.node.h - 2) / 2;
this.node.left = (smallimage.ow - this.node.w - 2) / 2;
//centering lens
this.node.css({
: this.node.,
left: this.node.left
});
if (settings.zoomType == 'reverse') {
$(this.image).css({
position: 'absolute',
display: 'block',
left: -(this.node.left + 1 - smallimage.bleft) + 'px',
: -(this.node. + 1 - smallimage.b) + 'px'
});
}
//centering large image
largeimage.setposition();
};
this.setposition = function (e) {
el.mousepos.x = e.pageX;
el.mousepos.y = e.pageY;
var lensleft = 0;
var lens = 0;
function overleft(lens) {
return el.mousepos.x - (lens.w) / 2 < smallimage.pos.l; 
}
function overright(lens) {
return el.mousepos.x + (lens.w) / 2 > smallimage.pos.r; 
}
function over(lens) {
return el.mousepos.y - (lens.h) / 2 < smallimage.pos.t; 
}
function overbottom(lens) {
return el.mousepos.y + (lens.h) / 2 > smallimage.pos.b; 
}
lensleft = el.mousepos.x + smallimage.bleft - smallimage.pos.l - (this.node.w + 2) / 2;
lens = el.mousepos.y + smallimage.b - smallimage.pos.t - (this.node.h + 2) / 2;
if (overleft(this.node)) {
lensleft = smallimage.bleft - 1;
} else if (overright(this.node)) {
lensleft = smallimage.w + smallimage.bleft - this.node.w - 1;
}
if (over(this.node)) {
lens = smallimage.b - 1;
} else if (overbottom(this.node)) {
lens = smallimage.h + smallimage.b - this.node.h - 1;
}
this.node.left = lensleft;
this.node. = lens;
this.node.css({
'left': lensleft + 'px',
'': lens + 'px'
});
if (settings.zoomType == 'reverse') {
if ($.browser.msie && $.browser.version > 7) {
$(this.node).empty().append(this.image);
}
$(this.image).css({
position: 'absolute',
display: 'block',
left: -(this.node.left + 1 - smallimage.bleft) + 'px',
: -(this.node. + 1 - smallimage.b) + 'px'
});
}
largeimage.setposition();
};
this.hide = function () {
img.css({
'opacity': 1
});
this.node.hide();
};
this.show = function () { 
if (settings.zoomType != 'innerzoom' && (settings.lens || settings.zoomType == 'drag')) {
this.node.show();
} 
if (settings.zoomType == 'reverse') {
img.css({
'opacity': settings.imageOpacity
});
}
};
this.getoffset = function () {
var o = {};
o.left = $obj.node.left;
o. = $obj.node.;
return o;
};
return this;
};
/========================================================,
| Stage
|---------------------------------------------------------:
| Window area that contains the large image
`========================================================/
function Stage() {
var $obj = this;
this.node = $("<div class='zoomWindow'><div class='zoomWrapper'><div class='zoomWrapperTitle'></div><div class='zoomWrapperImage'></div></div></div>");
this.ieframe = $('<iframe class="zoomIframe" src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0" ></iframe>');
this.setposition = function () {
this.node.leftpos = 0;
this.node.pos = 0;
if (settings.zoomType != 'innerzoom') {
//positioning
switch (settings.position) {
case "left":
this.node.leftpos = (smallimage.pos.l - smallimage.bleft - Math.abs(settings.xOffset) - settings.zoomWidth > 0) ? (0 - settings.zoomWidth - Math.abs(settings.xOffset)) : (smallimage.ow + Math.abs(settings.xOffset));
this.node.pos = Math.abs(settings.yOffset);
break;
case "":
this.node.leftpos = Math.abs(settings.xOffset);
this.node.pos = (smallimage.pos.t - smallimage.b - Math.abs(settings.yOffset) - settings.zoomHeight > 0) ? (0 - settings.zoomHeight - Math.abs(settings.yOffset)) : (smallimage.oh + Math.abs(settings.yOffset));
break;
case "bottom":
this.node.leftpos = Math.abs(settings.xOffset);
this.node.pos = (smallimage.pos.t - smallimage.b + smallimage.oh + Math.abs(settings.yOffset) + settings.zoomHeight < screen.height) ? (smallimage.oh + Math.abs(settings.yOffset)) : (0 - settings.zoomHeight - Math.abs(settings.yOffset));
break;
default:
this.node.leftpos = (smallimage.rightlimit + Math.abs(settings.xOffset) + settings.zoomWidth < screen.width) ? (smallimage.ow + Math.abs(settings.xOffset)) : (0 - settings.zoomWidth - Math.abs(settings.xOffset));
this.node.pos = Math.abs(settings.yOffset);
break;
}
}
this.node.css({
'left': this.node.leftpos + 'px',
'': this.node.pos + 'px'
});
return this;
};
this.append = function () {
$('.zoomPad', el).append(this.node);
this.node.css({
position: 'absolute',
display: 'none',
zIndex: 5001
});
if (settings.zoomType == 'innerzoom') {
this.node.css({
cursor: 'default'
});
var thickness = (smallimage.bleft == 0) ? 1 : smallimage.bleft;
$('.zoomWrapper', this.node).css({
borderWidth: thickness + 'px'
}); 
}
$('.zoomWrapper', this.node).css({
width: Math.round(settings.zoomWidth) + 'px' ,
borderWidth: thickness + 'px'
});
$('.zoomWrapperImage', this.node).css({
width: '100%',
height: Math.round(settings.zoomHeight) + 'px'
});
//zoom title
$('.zoomWrapperTitle', this.node).css({
width: '100%',
position: 'absolute'
}); 
$('.zoomWrapperTitle', this.node).hide();
if (settings.title && zoomtitle.length > 0) {
$('.zoomWrapperTitle', this.node).html(zoomtitle).show();
}
$obj.setposition();
};
this.hide = function () {
switch (settings.hideEffect) {
case 'fadeout':
this.node.fadeOut(settings.fadeoutSpeed, function () {});
break;
default:
this.node.hide();
break;
}
this.ieframe.hide();
};
this.show = function () {
switch (settings.showEffect) {
case 'fadein':
this.node.fadeIn();
this.node.fadeIn(settings.fadeinSpeed, function () {});
break;
default:
this.node.show();
break;
}
if (isIE6 && settings.zoomType != 'innerzoom') {
this.ieframe.width = this.node.width();
this.ieframe.height = this.node.height();
this.ieframe.left = this.node.leftpos;
this.ieframe. = this.node.pos;
this.ieframe.css({
display: 'block',
position: "absolute",
left: this.ieframe.left,
: this.ieframe.,
zIndex: 99,
width: this.ieframe.width + 'px',
height: this.ieframe.height + 'px'
});
$('.zoomPad', el).append(this.ieframe);
this.ieframe.show();
};
};
};
/========================================================,
| LargeImage
|---------------------------------------------------------:
| The large detailed image
`========================================================/
function Largeimage() {
var $obj = this;
this.node = new Image();
this.loadimage = function (url) {
//showing preload
loader.show();
this.url = url;
this.node.style.position = 'absolute';
this.node.style.border = '0px';
this.node.style.display = 'none';
this.node.style.left = '-5000px';
this.node.style. = '0px';
document.body.appendChild(this.node);
this.node.src = url; // fires off async
};
this.fetchdata = function () {
var image = $(this.node);
var scale = {};
this.node.style.display = 'block';
$obj.w = image.width();
$obj.h = image.height();
$obj.pos = image.offset();
$obj.pos.l = image.offset().left;
$obj.pos.t = image.offset().;
$obj.pos.r = $obj.w + $obj.pos.l;
$obj.pos.b = $obj.h + $obj.pos.t;
scale.x = ($obj.w / smallimage.w);
scale.y = ($obj.h / smallimage.h);
el.scale = scale;
document.body.removeChild(this.node);
$('.zoomWrapperImage', el).empty().append(this.node);
//setting lens dimensions;
lens.setdimensions();
};
this.node.onerror = function () {
alert('Problems while loading the big image.');
throw 'Problems while loading the big image.';
};
this.node.onload = function () {
//fetching data
$obj.fetchdata();
loader.hide();
el.largeimageloading = false;
el.largeimageloaded = true;
if (settings.zoomType == 'drag' || settings.alwaysOn) {
lens.show();
stage.show();
lens.setcenter();
}
};
this.setposition = function () {
var left = -el.scale.x  (lens.getoffset().left - smallimage.bleft + 1);
var  = -el.scale.y  (lens.getoffset(). - smallimage.b + 1);
$(this.node).css({
'left': left + 'px',
'':  + 'px'
});
};
return this;
};
$(el).data("jqzoom", obj);
};
//es. $.jqzoom.disable('#jqzoom1');
$.jqzoom = {
defaults: {
zoomType: 'standard',
//innerzoom/standard/reverse/drag
zoomWidth: 300,
//zoomWindow default width
zoomHeight: 300,
//zoomWindow default height
xOffset: 10,
//zoomWindow x offset, can be negative(more on the left) or positive(more on the right)
yOffset: 0,
//zoomWindow y offset, can be negative(more on the left) or positive(more on the right)
position: "right",
//zoomWindow default position
preloadImages: true,
//image preload
preloadText: 'Loading zoom',
title: true,
lens: true,
imageOpacity: 0.4,
alwaysOn: false,
showEffect: 'show',
//show/fadein
hideEffect: 'hide',
//hide/fadeout
fadeinSpeed: 'slow',
//fast/slow/number
fadeoutSpeed: '2000' //fast/slow/number
},
disable: function (el) {
var api = $(el).data('jqzoom');
api.disable();
return false;
},
enable: function (el) {
var api = $(el).data('jqzoom');
api.enable();
return false;
},
disableAll: function (el) {
jqzoompluging_disabled = true;
},
enableAll: function (el) {
jqzoompluging_disabled = false;
}
};
})(jQuery); 

$(function(){
$(".jqzoom").jqzoom({
zoomWidth: 300, 
zoomHeight: 300,
lens:true,
preloadImages: false,
alwaysOn:false,
title:false,
xOffset:20,
position: "right"
});
})

<a href="images/BIGIMAGE.JPG" class="jqzoom" title="MYTITLE"> 
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE"> 
</a>