Javascript 缩放图像使用查看图像，而不是使用以下代码_Javascript_Jquery_Html_Css_Zooming

Javascript 缩放图像使用查看图像，而不是使用以下代码

javascript jquery html css

Javascript 缩放图像使用查看图像，而不是使用以下代码,javascript,jquery,html,css,zooming,Javascript,Jquery,Html,Css,Zooming,我试图展示一幅图像，当你放大一个特定的点时，它应该在屏幕上完全显示这个特定的区域。我创建了一个。我想查看与中所示相同分辨率的图像，但当我放大时，图片的放大区域应填满整个原始图片帧代码如下： <!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <style> /* styles unrelated to zoom */

我试图展示一幅图像，当你放大一个特定的点时，它应该在屏幕上完全显示这个特定的区域。我创建了一个。我想查看与中所示相同分辨率的图像，但当我放大时，图片的放大区域应填满整个原始图片帧

代码如下：

<!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>


/*与缩放无关的样式*/
身体{
背景色：黑色；
保证金：0自动；
}
*{边框：0；边距：0；填充：0；}
p{位置：绝对；顶部：3px；右侧：28px；颜色：#555；字体：粗体13px/1无衬线；}
/*这些样式用于演示，但插件不需要*/
.zoom{
显示：内联块；
位置：相对位置；
背景色：黑色；
z指数：1000；
}
/*放大镜图标*/
.zoom:之后{
内容：''；
显示：块；
宽度：50px；
高度：50px；
位置：相对位置；
前50名；
右:70 ;；
}
.缩放图像{
显示：块；
}
.zoom img:：选择{背景色：透明；}
#ex3 img:hover{cursor:-moz放大；}
$（文档）.ready（函数（）{
$（'#ex3'）.zoom（{on:'toggle'}）；
});

编辑
上面的代码现在可以很好地在特定的地方进行缩放，当我在Firefox中单击view image时，我也可以在那里看到缩放效果，并且它可以完美地按照我的需要进行缩放。如何使缩放效果与视图中的图像一样。
EDIT1

现在，当我在Firefox中单击view image时，我可以缩放此图像。当我单击缩放图像时，类将从

收缩到变为溢出。当我执行下一步操作时，单击图像将从溢出的缩放到收缩到它。现在如何将此功能嵌入到我的图像中
这里是缩放的另一个变体，它不是单击而是直接悬停（这是Hardik所做的构建）

您也可以在此处使用不同的示例：

请注意，硬盘上有一个外部资源，Hardik将其连接到他的小提琴上。
有了这些代码，您就可以按原样在站点上自由测试任何示例
Good Luck!

由于Git拒绝执行脚本而无法工作，您只需删除该链接并将其下载到本地，即可正常工作，请检查以下内容：