javascript - 使用 Zoomooz 放大特定的 div-6ren

javascript - 使用 Zoomooz 放大特定的 div

转载作者：行者123 更新时间：2023-11-28 04:53:37

25

4

我有一张座位图，在移动设备上看起来有点小，目前需要双指开合才能在移动设备上放大。

我被介绍到 Zoomooz，它看起来很棒，但很难让它在嵌套的 div 上工作。是否可以放大到您需要的特定区域以更详细地查看座位图？

https://plnkr.co/edit/9VL3mDS34bKAe7qRxHYE?p=preview

<div id="theatre">
<div class="container">
  <div id="bmessage">Select the seats that you need.</div>
  <div id="seats" class="zoomTarget">
    <div class="s1 std grey" si="0" title="A16" style="top:16%; left:8.5%;"></div>
    <div class="s1 std grey" si="1" title="A15" style="top:16%; left:12%;"></div>
    <div class="s1 std grey" si="2" title="A14" style="top:16%; left:15.5%;"></div>
    <div class="s1 std grey" si="3" title="A13" style="top:16%; left:19%;"></div>
  </div>
</div>

最佳答案

只需更改 Index.html 的 cdn 链接并将 ZoomTarget 应用到每个要应用缩放功能的 div 检查这个plunker

HTML:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script src="script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zoomooz/1.1.6/jquery.zoomooz.min.js"></script>
  </head>

  <body>
    <div id="theatre" class="zoomViewport">
  <div class="zoomContainer container">
        <div id="bmessage">Select the seats that you need.</div>
        <div id="seats">
        <div data-closeclick="true" class="zoomTarget s1 std grey" si="0" title="A16" style="top:16%; left:8.5%;"></div>       
        <div data-closeclick="true" class="zoomTarget s1 std grey" si="1" title="A15" style="top:16%; left:12%;"></div>
        <div data-closeclick="true" class="zoomTarget s1 std grey" si="2" title="A14" style="top:16%; left:15.5%;"></div>       
        <div data-closeclick="true" class="zoomTarget s1 std grey" si="3" title="A13" style="20px;top:16%; left:19%;"></div>
  </div>
</div>
</div>
  </body>

</html>

关于javascript - 使用 Zoomooz 放大特定的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40547564/

25

4

0

文章推荐： javascript - 忽略来自 webpack 配置的 css 文件中的特定 @import

文章推荐： c++ - 使用字符串格式限制十六进制数字的数量

文章推荐： css - 如何在响应式网页中指定最小字体大小

javascript - 使用 Zoomooz 放大特定的 div
我有一张座位图，在移动设备上看起来有点小，目前需要双指开合才能在移动设备上放大。我被介绍到 Zoomooz，它看起来很棒，但很难让它在嵌套的 div 上工作。是否可以放大到您需要的特定区域以更详细地
jquery - 使用 zoomooz 缩放 HTML 内容
我想缩放其中包含文本的 HTML 表格。我正在使用 zoomooz，这是一个很棒的缩放工具: http://janne.aukia.com/zoomooz/ 我面临的问题是字体也被缩放了，这使得相同的
javascript - jQuery 和 Zoomooz.js 之间的冲突 : animate & zoomTarget at the same time
我正在做一个心理学研究项目，所以我真的是 JavaScript 的初学者。不过，我必须完成这项工作，而且它非常具体。我想在点击时放大页面的一个元素(书籍封面)，同时在它旁边打开额外的内容(一些文本)

首页

博学

6Ren·AI

商城

javascript - 使用 Zoomooz 放大特定的 div