Question

我有一些代码试图在悬停时调整图像的大小，我想我需要向其添加一个类，但是我一直在努力使其看起来更加平滑并且可以正常工作。因此，我可以将p-6类更改为p-5来达到我想要的效果吗？

这是与图片相关的HTML标记：

<div class="col-lg-6 order-lg-2">
  <div class="p-5">
    <img class="img-fluid rounded-circle" src="img/joe.jpg" alt="Joe's Image">
  </div>
</div>

预先感谢您的帮助！

Answer 1

我会使用CSS动画来解决此问题，例如：

注意：：我在下面使用了ID，但是如果要执行很多操作（不仅是一张），那就要上课。

注意2：当然，您可以使用JavaScript和jQuery解决此问题，如果您要这样做，请告诉我-我将更新答案。

#my-image {
  width: 90%;
  padding: 5%;
  transition: all 1s;
}

#my-image:hover {
  width: 100%;
  padding: 0%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6 order-lg-2">
   <div class="p-5">
     <img class="img-fluid rounded-circle " src="https://t3.ftcdn.net/jpg/00/92/53/56/240_F_92535664_IvFsQeHjBzfE6sD4VHdO8u5OHUSc6yHF.jpg" alt="Example Image" id="my-image">
   </div>
</div>

Answer 2

仅使用 JQuery ，您可以将hover()侦听器用于mouseenter和mouseleave事件，还可以使用 CSS 使用css()方法的JQuery。要缩放元素，可以将CSS transition与transform: scale(<some_number>)属性结合使用。检查下一个示例：

$(document).ready(function()
{
    $(".img-wrapper").find("img").css("transition", "transform 500ms ease-in-out");

    $(".img-wrapper").hover(    
        // Handler for mouseenter
        function()
        {
            $(this).find("img").css("transform", "scale(1.2)");
        },
        // Handler for mouseleave
        function()
        {
            $(this).find("img").css("transform", "scale(1)");
        }
    );
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="col-lg-6 order-lg-2">
   <div class="img-wrapper p-5 text-center bg-info">
     <img class="img-fluid rounded-circle" src="https://picsum.photos/200/300/?random" alt="Joe's Image">
   </div>
</div>

使用JQuery缩放图像

2 个答案: