这篇文章主要介绍了jQuery实现图片局部放大镜效果的相关资料,需要的朋友可以参考下

下图只是给大家举个例子，类似于这种效果图：

具体实现过程请看下文代码：

css:

.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;

top: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;

top:0px;

/*opacity:0.5;*/

z-index:5000;

width:100%;

height:100%;

display:none;

z-index:101;

}

.zoomWindow{

position:absolute;

left:110%;

top: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;

top: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

/*********************************************************/

js:

/*!

* jQzoom Evolution Library v2.3 - Javascript Image magnifier

* http://www.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 organization 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].complete) {

//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 bordertop = 0;

bordertop = image.css('border-top-width');

btop = '';

var borderleft = 0;

borderleft = image.css('border-left-width');

bleft = '';

if (bordertop) {

for (i = 0; i < 3; i++) {

var x = [];

x = bordertop.substr(i, 1);

if (isNaN(x) == false) {

btop = btop + '' + bordertop.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.btop = (btop.length > 0) ? eval(btop) : 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().top + $obj.btop;

$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().top + $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.top = (smallimage.oh - this.node.height()) / 2;

this.node.left = (smallimage.ow - this.node.width()) / 2;

//setting position

this.node.css({

top: this.node.top,

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.top = (smallimage.oh - this.node.h - 2) / 2;

this.node.left = (smallimage.ow - this.node.w - 2) / 2;

//centering lens

this.node.css({

top: 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',

top: -(this.node.top + 1 - smallimage.btop) + 'px'

});

}

};

this.setcenter = function () {

//calculating center position

this.node.top = (smallimage.oh - this.node.h - 2) / 2;

this.node.left = (smallimage.ow - this.node.w - 2) / 2;

//centering lens

this.node.css({

top: this.node.top,

left: this.node.left

});

if (settings.zoomType == 'reverse') {

$(this.image).css({

position: 'absolute',

display: 'block',

left: -(this.node.left + 1 - smallimage.bleft) + 'px',

top: -(this.node.top + 1 - smallimage.btop) + 'px'

});

}

//centering large image

largeimage.setposition();

};

this.setposition = function (e) {

el.mousepos.x = e.pageX;

el.mousepos.y = e.pageY;

var lensleft = 0;

var lenstop = 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 overtop(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;

lenstop = el.mousepos.y + smallimage.btop - 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 (overtop(this.node)) {

lenstop = smallimage.btop - 1;

} else if (overbottom(this.node)) {

lenstop = smallimage.h + smallimage.btop - this.node.h - 1;

}

this.node.left = lensleft;

this.node.top = lenstop;

this.node.css({

'left': lensleft + 'px',

'top': lenstop + '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',

top: -(this.node.top + 1 - smallimage.btop) + '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.top = $obj.node.top;

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.toppos = 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.toppos = Math.abs(settings.yOffset);

break;

case "top":

this.node.leftpos = Math.abs(settings.xOffset);

this.node.toppos = (smallimage.pos.t - smallimage.btop - 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.toppos = (smallimage.pos.t - smallimage.btop + 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.toppos = Math.abs(settings.yOffset);

break;

}

}

this.node.css({

'left': this.node.leftpos + 'px',

'top': this.node.toppos + '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.top = this.node.toppos;

this.ieframe.css({

display: 'block',

position: "absolute",

left: this.ieframe.left,

top: this.ieframe.top,

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.top = '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().top;

$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 top = -el.scale.y * (lens.getoffset().top - smallimage.btop + 1);

$(this.node).css({

'left': left + 'px',

'top': top + '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);

还需要有Jquery.js

使用方法：

1.当页面导入的时候，载入 jQZoom 插件。

$(function(){

$(".jqzoom").jqzoom({

zoomWidth: 300, 

zoomHeight: 300,

lens:true,

preloadImages: false,

alwaysOn:false,

title:false,

xOffset:20,

position: "right"

});

})

2.创建一个放图片的容器，指定一个a标记用于显示放大后的图片的一部分：

<a href="images/BIGIMAGE.JPG" class="jqzoom" title="MYTITLE"> 

<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE"> 

</a>

下面给一些基本的配置参数：

•zoomType，默认值：'standard'，另一个值是'reverse'，是否将原图用半透明图层遮盖。

•zoomWidth，默认值：200，放大窗口的宽度。

•zoomHeight，默认值：200，放大窗口的高度。

•xOffset，默认值：10，放大窗口相对于原图的x轴偏移值，可以为负。

•yOffset，默认值：0，放大窗口相对于原图的y轴偏移值，可以为负。

•position，默认值：'right'，放大窗口的位置，值还可以是:'right' ,'left' ,'top' ,'bottom'。

•lens，默认值：true，若为false，则不在原图上显示镜头。

•imageOpacity，默认值：0.2，当zoomType的值为'reverse'时，这个参数用于指定遮罩的透明度。

•title，默认值：true，在放大窗口中显示标题，值可以为a标记的title值，若无，则为原图的title值。

•showEffect，默认值：'show'，显示放大窗口时的效果，值可以为: ‘show' ,'fadein'。

•hideEffect，默认值：'hide'，隐藏放大窗口时的效果: ‘hide' ,'fadeout'。

•fadeinSpeed，默认值：'fast'，放大窗口的渐显速度(选项: ‘fast','slow','medium')。

•fadeoutSpeed，默认值：'slow'，放大窗口的渐隐速度(选项: ‘fast','slow','medium')。

•showPreload，默认值：true，是否显示加载提示Loading zoom(选项: ‘true','false')。

•preloadText，默认值：'Loading zoom'，自定义加载提示文本。

•preloadPosition，默认值：'center'，加载提示的位置，值也可以为'bycss'，以通过css指定位置。

样式的个性化当然也可以直接修改jqzoom.css文件。