如何在单击对象时缩放对象。单击图像会将单击的图像缩小到其目标图像。单击图像上的任意位置或关闭按钮或按 esc 键以重新放大图像。它应该类似于此http://andreaslagerkvist.com/jquery/image-zoom/#jquery-plugin-example
我已经更新了http://jsfiddle.net/ErTqL/3/中的代码
同样根据插件，如果我删除 css，图像就会出现，并且还会发生缩放。但是，关闭按钮不会出现，并且 esc 键或单击图像不会关闭缩放图像。
我需要一个类似于插件的输出。此外，缩放后的图像应该只占页面的 3/4，如插件中的那样，而不是在我的示例中，它扩展到整个页面，就像它的下一页一样。在删除插件的 CSS 之后，也可以参考这个http://jsfiddle.net/ErTqL/4/ 。请帮助，因为我是 Jquery 的新手。
我的代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="script/JQuery-1.10.1.min.js"></script>
<script type="text/javascript">
jQuery.fn.imageZoom = function (conf) {
// Some config. If you set dontFadeIn: 0 and hideClicked: 0 imgzoom will act exactly like fancyzoom
var config = jQuery.extend({
speed: 200, // Animation-speed of zoom
dontFadeIn: 1, // 1 = Do not fade in, 0 = Do fade in
hideClicked: 1, // Whether to hide the image that was clicked to bring up the imgzoom
imageMargin: 30, // Margin from image-edge to window-edge if image is larger than screen
className: 'jquery-image-zoom',
loading: 'Loading...'
}, conf);
config.doubleSpeed = config.speed / 4; // Used for fading in the close-button
return this.click(function(e) {
// Make sure the target-element is a link (or an element inside a link)
var clickedElement = jQuery(e.target); // The element that was actually clicked
var clickedLink = clickedElement.is('a') ? clickedElement : clickedElement.parents('a'); // If it's not an a, check if any of its parents is
clickedLink = (clickedLink && clickedLink.is('a') && clickedLink.attr('href').search(/(.*)\.(jpg|jpeg|gif|png|bmp|tif|tiff)$/gi) != -1) ? clickedLink : false; // If it was an a or child of an a, make sure it points to an image
var clickedImg = (clickedLink && clickedLink.find('img').length) ? clickedLink.find('img') : false; // See if the clicked link contains and image
// Only continue if a link pointing to an image was clicked
if (clickedLink) {
// These functions are used when the imaeg starts and stops loading (displays either 'loading..' or fades out the clicked img slightly)
clickedLink.oldText = clickedLink.text();
clickedLink.setLoadingImg = function () {
if (clickedImg) {
clickedImg.css({opacity: '0.5'});
}
else {
clickedLink.text(config.loading);
}
};
clickedLink.setNotLoadingImg = function () {
if (clickedImg) {
clickedImg.css({opacity: '1'});
}
else {
clickedLink.text(clickedLink.oldText);
}
};
// The URI to the image we are going to display
var displayImgSrc = clickedLink.attr('href');
// If an imgzoom wiv this image is already open dont do nathin
if (jQuery('div.' + config.className + ' img[src="' + displayImgSrc + '"]').length) {
return false;
}
// This function is run once the displayImgSrc-img has loaded (below)
var preloadOnload = function (pload) {
// The clicked-link is faded out during loading, fade it back in
clickedLink.setNotLoadingImg();
// Now set some vars we need
var dimElement = clickedImg ? clickedImg : clickedLink; // The element used to retrieve dimensions of imgzoom before zoom (either clicked link or img inside)
var hideClicked = clickedImg ? config.hideClicked : 0; // Whether to hide clicked link (set in config but always true for non-image-links)
var offset = dimElement.offset(); // Offset of clicked link (or image inside)
var imgzoomBefore = { // The dimensions of the imgzoom _before_ it is zoomed out
width: dimElement.outerWidth(),
height: dimElement.outerHeight(),
left: offset.left,
top: offset.top/*,
opacity: config.dontFadeIn*/
};
var imgzoom = jQuery('<div><img src="' + displayImgSrc + '" alt=""/></div>').css('position', 'absolute').appendTo(document.body); // We don't want any class-name or any other contents part from the image when we calculate the new dimensions of the imgzoom
var imgzoomAfter = { // The dimensions of the imgzoom _after_ it is zoomed out
width: pload.width,
height: pload.height/*,
opacity: 1*/
};
var windowDim = {
width: jQuery(window).width(),
height: jQuery(window).height()
};
// Make sure imgzoom isn't wider than screen
if (imgzoomAfter.width > (windowDim.width - config.imageMargin * 2)) {
var nWidth = windowDim.width - config.imageMargin * 2;
imgzoomAfter.height = (nWidth / imgzoomAfter.width) * imgzoomAfter.height;
imgzoomAfter.width = nWidth;
}
// Now make sure it isn't taller
if (imgzoomAfter.height > (windowDim.height - config.imageMargin * 2)) {
var nHeight = windowDim.height - config.imageMargin * 2;
imgzoomAfter.width = (nHeight / imgzoomAfter.height) * imgzoomAfter.width;
imgzoomAfter.height = nHeight;
}
// Center imgzoom
imgzoomAfter.left = (windowDim.width - imgzoomAfter.width) / 2 + jQuery(window).scrollLeft();
imgzoomAfter.top = (windowDim.height - imgzoomAfter.height) / 2 + jQuery(window).scrollTop();
var closeButton = jQuery('<a href="#">Close</a>').appendTo(imgzoom).hide(); // The button that closes the imgzoom (we're adding this after the calculation of the dimensions)
// Hide the clicked link if set so in config
if (hideClicked) {
clickedLink.css('visibility', 'hidden');
}
// Now animate the imgzoom from its small size to its large size, and then fade in the close-button
imgzoom.addClass(config.className).css(imgzoomBefore).animate(imgzoomAfter, config.speed, function () {
closeButton.fadeIn(config.doubleSpeed);
});
// This function closes the imgzoom
var hideImgzoom = function () {
closeButton.fadeOut(config.doubleSpeed, function () {
imgzoom.animate(imgzoomBefore, config.speed, function () {
clickedLink.css('visibility', 'visible');
imgzoom.remove();
});
});
return false;
};
// Close imgzoom when you click the closeButton or the imgzoom
imgzoom.click(hideImgzoom);
closeButton.click(hideImgzoom);
};
// Preload image
var preload = new Image();
preload.src = displayImgSrc;
if (preload.complete) {
preloadOnload(preload);
}
else {
clickedLink.setLoadingImg();
preload.onload = function () {
preloadOnload(preload);
};
}
// Finally return false from the click so the browser doesn't actually follow the link...
return false;
}
});
};
// Close image zooms when user hits esc
$(document).keydown(function (e) {
if (e.keyCode == 27) {
$('div.jquery-image-zoom a').click();
}
});
</script>
<style type="text/css">
.total
{
border:1px solid black;
width:100%;
height:900px;
margin-right:auto;
margin-left:auto;
}
.jquery-image-zoom
{
border:1px solid black;
width:98%;
height:100%;
margin-right:auto;
margin-left:auto;
}
.image_gallery
{
border:1px solid red;
width:100%;
height:27%;
}
.image_box
{
//border:1px solid blue;
width:33.1%;
height:100%;
float:left;
}
</style>
</head>
<body>
<div class="total">
<div id="jquery-image-zoom" class="jquery-image-zoom">
<ul>
<li><a href="http://exscale.se/__files/3d/bloodcells.jpg">Bloodcells</a></li>
<li><a href="http://exscale.se/__files/3d/x-wing.jpg">X-Wing</a></li>
<li><a href="http://exscale.se/__files/3d/weve-moved.jpg">We've moved</a></li>
</ul>
<div class="image_gallery">
<div class="image_box"><a href="http://exscale.se/__files/3d/lamp-and-mates/lamp-and-mates-01.jpg"> <img src="http://exscale.se/__files/3d/lamp-and-mates/lamp-and-mates-01_small.jpg" alt="Lamp and Mates" /> </a> </div>
<div class="image_box"> <a href="http://exscale.se/__files/3d/stugan-winter.jpg"><img src="http://exscale.se/__files/3d/stugan-winter_small.jpg" alt="The Cottage - Winter time" alt="Lamp and Mates" /></a> </div>
<div class="image_box"> <a href="http://exscale.se/__files/3d/ps2.jpg"> <img src="http://exscale.se/__files/3d/ps2_small.jpg" alt="Lamp and Mates" /></a> </div>
</div>
<!--
<ul>
<li><a href="http://exscale.se/__files/3d/lamp-and-mates/lamp-and-mates-01.jpg"><img src="http://exscale.se/__files/3d/lamp-and-mates/lamp-and-mates-01_small.jpg" alt="Lamp and Mates" /></a></li>
<li><a href="http://exscale.se/__files/3d/stugan-winter.jpg"><img src="http://exscale.se/__files/3d/stugan-winter_small.jpg" alt="The Cottage - Winter time" /></a></li>
<li><a href="http://exscale.se/__files/3d/ps2.jpg"><img src="http://exscale.se/__files/3d/ps2_small.jpg" alt="PS2" /></a></li>
</ul>
-->
</div>
</div>
</body>
</html>