放大、縮小 html 中的功能

Question

塊引用

大家好，請問是否可以在此代碼中添加放大、縮小功能？ 我對 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>

塊引用

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>

Answer 2

 var imagesize = $('img').width(); $('.zoomout').on('click', function(){ imagesize = imagesize - 5; $('img').width(imagesize); }); $('.zoomin').on('click', function(){ imagesize = imagesize + 5; $('img').width(imagesize); });

 div {height:150px; width:150px; display:block; overflow:hidden; outline: 2px solid #777777; padding:20px;} img {width:150px;} button {font-size:10px; margin:10px;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_bKbC-4AX-6mG9oeROWNuXK4bKwhYloqxKqKSyiBH58lyuV8-Xg"/></div> <button class="zoomout">Zoom Out</button > <button class="zoomin">Zoom In</button >