Image loupe exemple d'utilisation de jquery.jqzoom.js avec icône en forme de loupe

Cet article présente principalement l'utilisation de la loupe d'image jquery.jqzoom.js. Une icône en forme de loupe est également jointe. Les amis qui en ont besoin peuvent s'y référer

1. .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. code html

<!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>

Pièce jointe : icône en forme de loupe (zoomlens.gif)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!