Question

我想做一些事情，例如，在按钮点击显示所有网页内容的放大镜，第二个按钮点击将关闭放大镜。

只是想知道是否可以使用HTML5，JQuery，CSS3为任何整个网页内容创建放大镜效果？

我查了一些例子，但它们都有一个大图像，小图像或画布。我想在任何网站的整个内容上使用它，而不仅仅是图像...这可能吗？

Answer 1

通过使用 Zoomooz.js 库，这绝对是可能的：http://jaukia.github.io/zoomooz/

要完成这项工作，您需要先下载该JavaScript库并引用您需要的部分：

HTML包含

<custom>/<special>/<other> Node

<强>的JavaScript
这个目标是“缩放”类，并从库中应用“zoomTo”方法。然后，通过对身体应用相同的东西，它允许用户在任何元素外部单击以缩小到正常水平。要展开此选项，请将“缩放”类应用于您想要缩放的任何元素。

<head>
    <title>Zooming Test</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="sylvester.js"></script>
    <script type="text/javascript" src="purecssmatrix.js"></script>
    <script type="text/javascript" src="jquery.animtrans.js"></script>
    <script type="text/javascript" src="jquery.zoomooz.js"></script>
</head>

<强> HTML
接下来，创建一个受缩放功能影响的容器：

$(document).ready(function() {
   $(".zoom").click(function(evt) {
   evt.stopPropagation();
   $(this).zoomTo();
   });
   $(window).click(function(evt) {
   evt.stopPropagation();
   $("body").zoomTo();
   });
   $("body").zoomTo();
});

<强> CSS
然后，将大小和位置应用于每个div元素。（#inner必须使用 position：absolute 才能使其正常工作）

<body>
      <div id="container">
      <div id="outer" class="zoom">
      <div id="inner" class="zoom">
      <p><a href="#">Click here to zoom</a></p>
      </div>
      </div>
      </div>
</body>

（可选）文字样式：

#container {
    width: 800px;
    height: 500px;
    margin: 0 auto;
}
#outer {
    width: 400px;
    height: 200px;
    background: #aaa;
    margin: 50px auto;
    padding: 70px;
}
#inner {
    width: 400px;
    height: 200px;
    background: #eee;
    margin: 0 auto;
    position: absolute;
}

<强>修改
您应该有3个单独的缩放图层来浏览。您可以修改CSS以根据需要放大更宽的区域。添加或删除div元素将决定您拥有多少缩放级别。

参考： http://designshack.net/articles/javascript/create-an-awesome-zooming-web-page-with-jquery/

为所有网页内容创建放大镜效果？

1 个答案: