4

我只是想知道如何使用 jquery 放大图片，

类似这个网站的东西，

链接文本

当您单击大图像时，它会放大，您可以移动光标并在放大时查看图片的另一部分，

如果有人可以向我显示链接或将我引向正确的方向，我将不胜感激。

4

5 回答 5

19

他们没有放大，真正发生的是当您单击缩放文本时，div 内的图像被该图像的更大版本替换。并且溢出设置为隐藏。

当您移动光标时，使用一些巧妙的 JavaScript 和 DOM 处理，图像会相应地相对移动，从而创建您实际放大图片的效果。

我将尝试为您创建一个简单的示例。

编辑

抱歉花了一段时间，但这里是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Example</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
                var fullWidth = 864; // Width in pixels of full-sized image
                var fullHeight = 648; // Height in pixels of full-sized image
                var thumbnailWidth = 389;  // Width in pixels of thumbnail image
                var thumbnailHeight = 292;  // Height in pixels of thumbnail image

                // Set size of div
                $('#picture').css({
                        'width': thumbnailWidth+'px',
                        'height': thumbnailHeight+'px'
                });

                // Hide the full-sized picture
                $('#full').hide();

                // Toggle pictures on click
                $('#picture').click(function() {
                        $('#thumbnail').toggle();
                        $('#full').toggle();
                });

                // Do some calculations
                $('#picture').mousemove(function(e) {
                        var mouseX = e.pageX - $(this).attr('offsetLeft'); 
                        var mouseY = e.pageY - $(this).attr('offsetTop'); 

                        var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
                        var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);

                        $('#full').css({
                                'left': '-' + posX + 'px',
                                'top': '-' + posY + 'px'
                        });
                });
        });
    </script>

    <style type="text/css">
        #picture {
                overflow: hidden;
                position: relative;
                border: 1px solid #000000;
        }

        #thumbnail {
                cursor: pointer;
        }

        #full {
                position: relative;
                cursor: crosshair;
        }
    </style>
</head>

<body>
    <div id="picture">
        <img alt="" id="thumbnail" src="http://img202.imageshack.us/img202/8403/93629325.jpg" />
        <img alt="" id="full" src="http://img111.imageshack.us/img111/4734/tbmecsekyellowflower.jpg" />
    </div>
</body>
</html>

您将需要相应地调整缩略图和全尺寸图像的宽度和高度。但只需复制粘贴以上内容即可查看位于 imageshack 上的图像示例。

于 2009-10-17T09:18:18.623 回答
3

gzoom、miniZoomPan、WarpZoom 和 Image Detail 插件都让这类事情变得简单。你可以在这里找到它们：

http://plugins.jquery.com/taxonomy/term/1848

可能还有其他人。

希望有帮助！

编辑：在上一个名为What's the best jQuery product zoom plugin？

于 2009-10-17T09:25:47.210 回答
1

您需要的不仅仅是简单的缩放。但是固定视口内的缩放和平移功能。您提供的网站可能是从头开始编写代码的。我为你找到了一个不完全相同的，但你可能想看看这里。

同时，我很想看看Sbm007的例子。

于 2009-10-17T09:24:26.990 回答
0

Asos.com 从头开始​​编写他们的代码，看看如何使用 Firebug：http ://www.asos.com/assets/asosCom/js/libs/asos.js.utils.productpage.js

于 2010-01-19T14:29:02.817 回答
0

嘿，阿米尔，我正在添加一个教程链接，它是您搜索的正确解决方案，请尝试以下链接中的教程，它还将帮助您以其他 3 种不同方式放大图像...

http://www.jacklmoore.com/zoom/

我试过这个，它工作正常。

于 2015-06-04T09:49:08.503 回答