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

＆＃13;

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

＆＃13;

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

＆＃13;

<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 >

＆＃13;

在html中放大，缩小功能

2 个答案: