html放大镜小图标,图片放大镜jquery.jqzoom.js使用实例附放大镜图标

1. jquery.jqzoom.js

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

// jQZoom allows you to realize a small magnifier window,close

// to the image or images on your web page easily.

//

// jqZoom version 2.2

// Author Doc. Ing. Renzi Marco(www.mind-projects.it)

// First Release on Dec 05 2007

// i'm looking for a job,pick me up!!!

// mail: renzi.mrc@gmail.com

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

(function ($) {

$.fn.jqueryzoom = function (options) {

var settings = {

xzoom: 200, //zoomed width default width

yzoom: 200, //zoomed div default width

offset: 10, //zoomed div default offset

position: "right",//zoomed div default position,offset position is to the right of the image

lens: 1, //zooming lens over the image,by default is 1;

preload: 1

};

if (options)

{

$.extend(settings, options);

}

var noalt = '';

$(this).hover(function () {

var imageLeft = $(this).offset().left;

var imageTop = $(this).offset().top;

var imageWidth = $(this).children('img').get(0).offsetWidth;

var imageHeight = $(this).children('img').get(0).offsetHeight;

noalt = $(this).children("img").attr("alt");

var bigimage = $(this).children("img").attr("jqimg");

$(this).children("img").attr("alt", '');

if ($("div.zoomdiv").get().length == 0)

{

$(this).after("

");

$(this).append("

}

if (settings.position == "right")

{

if (imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width)

{

leftpos = imageLeft - settings.offset - settings.xzoom;

} else

{

leftpos = imageLeft + imageWidth + settings.offset;

}

} else

{

leftpos = imageLeft - settings.xzoom - settings.offset;

if (leftpos < 0)

{

leftpos = imageLeft + imageWidth + settings.offset;

}

}

$("div.zoomdiv").css({ top: imageTop, left: leftpos });

$("div.zoomdiv").width(settings.xzoom);

$("div.zoomdiv").height(settings.yzoom);

$("div.zoomdiv").show();

if (!settings.lens)

{

$(this).css('cursor', 'crosshair');

}

$(document.body).mousemove(function (e) {

mouse = new MouseEvent(e);

/*$("div.jqZoomPup").hide();*/

var bigwidth = $(".bigimg").get(0).offsetWidth;

var bigheight = $(".bigimg").get(0).offsetHeight;

var scaley = 'x';

var scalex = 'y';

if (isNaN(scalex) | isNaN(scaley))

{

var scalex = (bigwidth / imageWidth);

var scaley = (bigheight / imageHeight);

$("div.jqZoomPup").width((settings.xzoom) / scalex);

$("div.jqZoomPup").height((settings.yzoom) / scaley);

if (settings.lens)

{

$("div.jqZoomPup").css('visibility', 'visible');

}

}

xpos = mouse.x - $("div.jqZoomPup").width() / 2 - imageLeft;

ypos = mouse.y - $("div.jqZoomPup").height() / 2 - imageTop;

if (settings.lens)

{

xpos = (mouse.x - $("div.jqZoomPup").width() / 2 < imageLeft) ? 0 : (mouse.x + $("div.jqZoomPup").width() / 2 > imageWidth + imageLeft) ? (imageWidth - $("div.jqZoomPup").width() - 2) : xpos;

ypos = (mouse.y - $("div.jqZoomPup").height() / 2 < imageTop) ? 0 : (mouse.y + $("div.jqZoomPup").height() / 2 > imageHeight + imageTop) ? (imageHeight - $("div.jqZoomPup").height() - 2) : ypos;

}

if (settings.lens)

{

$("div.jqZoomPup").css({ top: ypos, left: xpos });

}

scrolly = ypos;

$("div.zoomdiv").get(0).scrollTop = scrolly * scaley;

scrollx = xpos;

$("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex;

});

}, function () {

$(this).children("img").attr("alt", noalt);

$(document.body).unbind("mousemove");

if (settings.lens)

{

$("div.jqZoomPup").remove();

}

$("div.zoomdiv").remove();

});

count = 0;

if (settings.preload)

{

$('body').append("

sdsdssdsd

");

$(this).each(function () {

var imagetopreload = $(this).children("img").attr("jqimg");

var content = jQuery('div.jqPreload' + count + '').html();

jQuery('div.jqPreload' + count + '').html(content + '');

});

}

}

})(jQuery);

function MouseEvent(e) {

this.x = e.pageX;

this.y = e.pageY;

}

2. jqzoom.css

/*jQzoom*/

.jqzoom{

border:1px solid #BBB;

float:left;

position:relative;

padding:0px;

cursor:pointer;

}

div.zoomdiv {

z-index: 999;

position : absolute;

top:0px;

left:0px;

width : 200px;

height : 200px;

background: #ffffff;

border:1px solid #CCCCCC;

display:none;

text-align: center;

overflow: hidden;

}

div.jqZoomPup {

z-index : 999;

visibility : hidden;

position : absolute;

top:0px;

left:0px;

width : 50px;

height : 50px;

border: 1px solid #aaa;

background: #ffffff url(../images/zoomlens.gif) 50% top no-repeat;

opacity: 0.5;

-moz-opacity: 0.5;

-khtml-opacity: 0.5;

filter: alpha(Opacity=50);

}

3. html代码

/*使用jqzoom*/

$(function() {

$(".jqzoom").jqueryzoom({

xzoom: 400, //放大图的宽度(默认是 200)

yzoom: 400, //放大图的高度(默认是 200)

offset: 10, //离原图的距离(默认是 10)

position: "right", //放大图的定位(默认是 "right")

preload: 1

});

});

附件：放大镜图标(zoomlens.gif)