logo标签列表

使用视图图像而不是下面的代码来缩放图像

javascriptjqueryhtmlcsszooming
4
我正在尝试展示一张图片，当您在特定位置放大时，它应该完全显示在屏幕上。我创建了一个演示。我希望查看的图像分辨率与演示中所示相同，但是当我放大时，图片的放大区域应该填满整个原始图片框架。
以下是代码：
<!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中点击查看图片时，我也可以看到缩放的效果，并且它完美地按照我的要求工作。我该如何使缩放像查看图像一样工作呢？
编辑1
现在，当我在Firefox中点击查看图片时，我可以缩放这张图片。当我点击放大图片时，类从shrinktofit变为overflowing。当我再次点击时，图像从overflowing缩小到shrinktofit。现在，我该如何将此功能嵌入我的图像中？
3
因为 Git 拒绝执行脚本，所以无法正常工作。您可以删除该链接并将其下载到本地，它将正常运行。请参考：http://jsfiddle.net/hardiksondagar/hYMc5/2/。 - Hardik Sondagar
1个回答
0
这是另一种缩放的变化，不是点击而是直接悬停（基于Hardik的构建）。

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

这里还有不同的示例可供使用： http://www.jacklmoore.com/zoom/

请注意，Hardik在他的fiddle上附加了一个托管在Drive上的外部资源。 有了那段代码，您可以自由地测试该网站上的任何示例。

Good Luck!
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接