Question

我正在尝试显示图像，当您放大特定位置时，它应该在屏幕上完全显示该特定区域。我创建了一个fiddle。我希望将图像视为与fiddle中显示的分辨率相同，但是当我放大时，图片的放大区域应该会填满整个原始相框。

以下是代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>

    <style>
        /* styles unrelated to zoom */
                body {
    background-color: black;
    margin:0 auto;
}
        * { border:0; margin:0; padding:0; }
        p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

        /* these styles are for the demo, but are not required for the plugin */
        .zoom {
            display:inline-block;
            position: relative;
                        background-color: black;                        
                        z-index:1000;
        }

        /* magnifying glass icon */
        .zoom:after {
            content:'';
            display:block; 
            width:50px; 
            height:50px; 
            position:relative; 
            top:50;
            right:70;

        }

        .zoom img {
            display: block;
        }

        .zoom img::selection { background-color: transparent; }

        #ex3 img:hover { cursor:-moz-zoom-in; }

    </style>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <script src='js/jquery.zoom.js'></script>
    <script>
        $(document).ready(function(){
            $('#ex3').zoom({ on:'toggle' });             

        });
    </script>
</head>
<body>
<center>
    <span class='zoom' id='ex3'>
    <img src='images/cg_layout.jpg' width='918' height='655' alt=''>

    </span>
</center>

</body>
</html>

修改
上面的代码现在可以在特定的地方放大，当我点击Firefox中的视图图像时，我也可以看到缩放工作，它可以完美地工作。如何使缩放像在视图图像中一样工作的 EDIT1 现在，当我点击Firefox中的视图图像时，我可以缩放此图像。当我点击缩放图片时，该类会从 shrinktofit 更改为 overflowing 。当我执行下一步操作时，点击图片缩略图从 overflowing 到 shrinktofit 。现在如何将此功能嵌入我的图像

Answer 1

这是缩放的另一种变体，它不是点击而是直接悬停（建立在Hardik所做的事情之上）。

http://jsfiddle.net/4CHj2/1/

您还可以使用此处使用的不同示例： http://www.jacklmoore.com/zoom/

请注意，Drive上有一个外部资源，Hardik附加到他的小提琴上。使用该代码，您可以自由地在网站上测试任何示例。

Good Luck!

缩放使用视图图像但不使用以下代码的图像

1 个答案: