Question

我的网站上有一栏,使用户能够查看该页所载信息的来源。我想他们能够干 in,但我发现,每个例子都表明,把这个要素看上去只会增加或减少对我来说的机体(或物体,我也试图这样做)。这与我所发现和审判的那件事情是一米左右。

var img = $( #image-container iframe );
var zoomWidthIncrement = img.width() * 1 / 3;
var zoomHeightIncrement = img.height() * 1 / 3;

$("#zoom-in").click(function(e) {
    img.css({
        width: img.width() + zoomWidthIncrement,
        //height: img.height() + zoomHeightIncrement
    });
    e.preventDefault();
});

$("#zoom-out").click(function(e) {
    img.css({
        width: img.width(function(i, w) {
            return w - zoomWidthIncrement;
        }),
      //  height: img.height(function(i, w) {
       //     return w - zoomWidthIncrement;
       // })
    });
    e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="image-container">

    <iframe src="https://asascreener.elementfx.com/cdc-hiv-prep-guidelines-2021.html">
    
    </iframe>

</div>
<br>
<div id="image-controls">
     <input id="zoom-in" value="+" type="submit" />
     <input id="zoom-out" value="-" type="submit" />
</div>

Answer 1

我举了一个例子,利用变卖财产来扩大地块内的内容。

希望帮助你们,哪怕少了。

let scale = 1;
    $("#zoom-in").click((e) => {
      scale *= 1.2; // Increase scale factor (you can adjust the factor)
      updateScale();
    });

    $("#zoom-out").click((e) => {
      scale /= 1.2; // Decrease scale factor (you can adjust the factor)
      updateScale();
    });
    const updateScale = () => {
      $("#scaled-frame").css("zoom", scale);
    };

#scaled-frame {
  width: 700px;
  height: 400px;
  border: 0px;
}
#scaled-frame {
  zoom: 1.75;
  -moz-transform: scale(1.75);
  -moz-transform-origin: 0 0;
  -o-transform: scale(1.75);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(1.75);
  -webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  #scaled-frame {
    zoom: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image-controls">
  <input id="zoom-in" value="+" type="submit" />
  <input id="zoom-out" value="-" type="submit" />
</div>
<div id="image-container">
  <iframe
    id="scaled-frame"
    src="https://asascreener.elementfx.com/cdc-hiv-prep-guidelines-2021.html"
  ></iframe>
</div>

感谢。

友情链接