Heim >Web-Frontend >js-Tutorial >Bildlupe jquery.jqzoom.js Anwendungsbeispiel mit Lupe icon_jquery

Bildlupe jquery.jqzoom.js Anwendungsbeispiel mit Lupe icon_jquery

WBOY
WBOYOriginal
2016-05-16 16:43:421288Durchsuche


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("<div class='zoomdiv'><img class='bigimg' src='" + bigimage + "'/></div>");
$(this).append("<div class='jqZoomPup'> </div>");
}
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) &#63; 0 : (mouse.x + $("div.jqZoomPup").width() / 2 > imageWidth + imageLeft) &#63; (imageWidth - $("div.jqZoomPup").width() - 2) : xpos;
ypos = (mouse.y - $("div.jqZoomPup").height() / 2 < imageTop) &#63; 0 : (mouse.y + $("div.jqZoomPup").height() / 2 > imageHeight + imageTop) &#63; (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("<div style='display:none;' class='jqPreload" + count + "'>sdsdssdsd</div>");
$(this).each(function () {
var imagetopreload = $(this).children("img").attr("jqimg");
var content = jQuery('div.jqPreload' + count + '').html();
jQuery('div.jqPreload' + count + '').html(content + '<img src=\"' + imagetopreload + '\">');
});
}
}
})(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-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>
<div class="jqzoom">
<img src="images/shoe1_small.jpg" style="width:300px; height:300px;" alt="" jqimg="images/shoe1_big.jpg" id="bigImg"/>
</div>
</body>
</html>

Anhang: Lupensymbol (zoomlens.gif)

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn