javascript - 放大，缩小html中的功能

Question

Blockquote

大家好，请问是否可以在此代码中添加放大、缩小功能？我对 html 很陌生。任何帮助将不胜感激。

<div class="sl-block" data-block-type="text" style="width: 413px; left: 29px; top: 84px; height: auto;" data-block-id="a3e059aa2efde6bb395d96de758538ef">
    <div class="sl-block-content" data-placeholder-tag="h2" data-placeholder-text="Title Text" style="text-align: left; z-index: 11;">
        <h2>
            <span style="font-size:0.7em">Career Center Floor</span>&nbsp;
        </h2>
    </div>
</div>
<div class="sl-block" data-block-type="text" style="width: 413px; left: 29px; top: 231px; height: auto;" data-block-id="9d9bce75d195e9e223f5d8542e6441da">
    <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat." style="z-index: 13; text-align: left;">
        <ol>
            <li class="">
                <span style="font-size:0.9em">Clients first come in contact with career coaches when they walk into the Career Center. ​​</span>
            </li>
            <li class="">
                <span style="font-size:0.9em">If they would love to use the computer, we confirm their information and provide them with their login credentials. </span>
            </li>
        </ol>
    </div>
</div>
<div class="sl-block" data-block-type="image" style="width: 492px; height: 277px; left: 466px; top: 84px;" data-block-id="a7d2425befcc101a308007e77988f4af">
    <div class="sl-block-style" style="z-index: 12; transform: rotate(180deg);">
        <div class="sl-block-content" style="z-index: 12; border-style: solid; border-width: 1px;">
            <img style="" data-natural-width="2400" data-natural-height="1350" data-lazy-loaded="" src="https://s3.amazonaws.com/media-p.slid.es/uploads/762662/images/4156874/20170915_130043.jpg"/>
        </div>
    </div>
</div>
<div class="sl-block" data-block-type="text" data-block-id="a67966971a44247acc6d3c39c8e58444" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: -134px; top: 35px;">
    <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
        <p>Station # 1</p>
    </div>
</div>
<div class="sl-block" data-block-type="image" data-block-id="a4223a242dc9a0bf9f41eca2258369d3" style="min-width: 30px; min-height: 30px; width: 486px; height: 322px; left: 466px; top: 360px;">
    <div class="sl-block-content" style="z-index: 15;">
        <img data-natural-width="584" data-natural-height="387" style="" data-lazy-loaded="" src="https://s3.amazonaws.com/media-p.slid.es/uploads/762662/images/4156885/f2c375d99f7def3cdccbec0cc2537cb1.jpg"/>
    </div>
</div>

Blockquote

Answer 1

根据您的预期行为，您可以使用简单的 css 转换函数 scale()。

在你的例子中，你可以在我的例子中使用图像而不是div

.square {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  margin: 20px;
  transition: transform 0.5s;
}

.square:hover {
  transform: scale(1.2);
}

.image1 {
  background: black;
}

.image2 {
  background: white;
}
  
.image3 {
  background: red;
}

.image4 {
  background: green;
}

<div class="square image1"></div>
<div class="square image2"></div>
<div class="square image3"></div>
<div class="square image4"></div>