Image magnifying glass jquery.jqzoom.js usage example with magnifying glass icon

This article mainly introduces the use of the image magnifying glass jquery.jqzoom.js. A magnifying glass icon is also attached. Friends who need it can refer to it

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 p default width
offset: 10, //zoomed p default offset
position: "right",//zoomed p 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 ($("p.zoomp").get().length == 0)
{
$(this).after("<p class=&#39;zoomp&#39;><img class=&#39;bigimg&#39; src=&#39;" + bigimage + "&#39;/></p>");
$(this).append("<p class=&#39;jqZoomPup&#39;> </p>");
}
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;
}
}
$("p.zoomp").css({ top: imageTop, left: leftpos });
$("p.zoomp").width(settings.xzoom);
$("p.zoomp").height(settings.yzoom);
$("p.zoomp").show();
if (!settings.lens)
{
$(this).css(&#39;cursor&#39;, &#39;crosshair&#39;);
}
$(document.body).mousemove(function (e) {
mouse = new MouseEvent(e);
/*$("p.jqZoomPup").hide();*/
var bigwidth = $(".bigimg").get(0).offsetWidth;
var bigheight = $(".bigimg").get(0).offsetHeight;
var scaley = &#39;x&#39;;
var scalex = &#39;y&#39;;
if (isNaN(scalex) | isNaN(scaley))
{
var scalex = (bigwidth / imageWidth);
var scaley = (bigheight / imageHeight);
$("p.jqZoomPup").width((settings.xzoom) / scalex);
$("p.jqZoomPup").height((settings.yzoom) / scaley);
if (settings.lens)
{
$("p.jqZoomPup").css(&#39;visibility&#39;, &#39;visible&#39;);
}
}
xpos = mouse.x - $("p.jqZoomPup").width() / 2 - imageLeft;
ypos = mouse.y - $("p.jqZoomPup").height() / 2 - imageTop;
if (settings.lens)
{
xpos = (mouse.x - $("p.jqZoomPup").width() / 2 < imageLeft) ? 0 : (mouse.x + $("p.jqZoomPup").width() / 2 > imageWidth + imageLeft) ? (imageWidth - $("p.jqZoomPup").width() - 2) : xpos;
ypos = (mouse.y - $("p.jqZoomPup").height() / 2 < imageTop) ? 0 : (mouse.y + $("p.jqZoomPup").height() / 2 > imageHeight + imageTop) ? (imageHeight - $("p.jqZoomPup").height() - 2) : ypos;
}
if (settings.lens)
{
$("p.jqZoomPup").css({ top: ypos, left: xpos });
}
scrolly = ypos;
$("p.zoomp").get(0).scrollTop = scrolly * scaley;
scrollx = xpos;
$("p.zoomp").get(0).scrollLeft = (scrollx) * scalex;
});
}, function () {
$(this).children("img").attr("alt", noalt);
$(document.body).unbind("mousemove");
if (settings.lens)
{
$("p.jqZoomPup").remove();
}
$("p.zoomp").remove();
});
count = 0;
if (settings.preload)
{
$(&#39;body&#39;).append("<p style=&#39;display:none;&#39; class=&#39;jqPreload" + count + "&#39;>sdsdssdsd</p>");
$(this).each(function () {
var imagetopreload = $(this).children("img").attr("jqimg");
var content = jQuery(&#39;p.jqPreload&#39; + count + &#39;&#39;).html();
jQuery(&#39;p.jqPreload&#39; + count + &#39;&#39;).html(content + &#39;<img src=\"&#39; + imagetopreload + &#39;\">&#39;);
});
}
}
})(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;
}
p.zoomp {
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;
}
p.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 code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.jqzoom.js" type="text/javascript"></script>
<link href="jqzoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
/*使用jqzoom*/
$(function() {
$(".jqzoom").jqueryzoom({
xzoom: 400, //放大图的宽度(默认是 200)
yzoom: 400, //放大图的高度(默认是 200)
offset: 10, //离原图的距离(默认是 10)
position: "right", //放大图的定位(默认是 "right")
preload: 1
});
});
</script>
</head>
<body>
<p class="jqzoom">
<img src="images/shoe1_small.jpg" style="width:300px; height:300px;" alt="" jqimg="images/shoe1_big.jpg" id="bigImg"/>
</p>
</body>
</html>

Attachment: magnifying glass icon (zoomlens.gif)

The above is the detailed content of Image magnifying glass jquery.jqzoom.js usage example with magnifying glass icon. For more information, please follow other related articles on the PHP Chinese website!