按下LMB时如何使图像/ div变小？答案

【问题标题】：How to make image/div smaller when LMB is being pressed?按下LMB时如何使图像/ div变小？
【发布时间】：2020-07-17 13:29:50
【问题描述】：

所以，我在页面中间有一张图片（我希望它保留在那里），当我拿着 LMB 时，我希望它变小一点，然后返回释放时的先前大小。

代码下方：

$(document).ready(function() {
        $("#banana").mousedown(function() {
            $("#banana").css("height","70%");
        });
        
        $("#banana").mouseup(function() {
            $("#banana").css("height","100%");
        });
    });

    .centered {
        text-align: center;
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div id = "banana" class = "centered">
            <img src="https://via.placeholder.com/150" alt="banana.png">
    </div>
</body>

我尝试使用 jQuery 获取该目标（但图像的位置发生了变化并且不再居中）。

提前致谢！

【问题讨论】：

标签： javascript html jquery css jquery-click-event

【解决方案1】：

这很容易仅通过 CSS 实现，使用 :active 伪选择器（对应于“mousedown”）。还有为什么不使用 Flex 来轻松居中。

.container {
  border: #00f solid 1px;
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container img {
  transition: all 0.3s ease-in-out;
  transform: scale(1);
}
.container img:active {
  transform: scale(0.8);
}

&lt;div class="container"&gt;&lt;img src="https://via.placeholder.com/150"/&gt;&lt;/div&gt;

【讨论】：

不错的解决方案！我从没想过为此使用:active 选择器
噢，非常感谢！没想到（也不知道）。我是网站制作的新手，刚开始制作自己的项目，这对我有很大帮助

【解决方案2】：

试试

transform: scale(0.7)

而不是高度。它将居中并且效率更高（GPU 使用率）

【讨论】：

【解决方案3】：

将 LMB 放在图像上而不是 div 上，并使用宽度而不是高度

$(document).ready(function() {
    $("#pic").mousedown(function() {
    
    
        $("#pic").css("width","70%");
    
    });
    
    $("#pic").mouseup(function() {
   
    
        $("#pic").css("width","100%");
    
    });
});

.centered {
    
    text-align: center;
    display: block;
    
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    
        <div id = "banana" class = "centered">
            <img id='pic' src="https://picsum.photos/300" alt="banana.png">
        </div>
    
</body>

【讨论】：

【解决方案4】：

在你的 body 中添加和删除一个类并间接转换你的图像：

$(document).ready(function() {

  const body = $('body');
  const cssClassClicked = 'lmb-clicked';

  body
    .mousedown(function() {
      body.toggleClass(cssClassClicked)
    })
    .mouseup(function() {
      body.toggleClass(cssClassClicked)
    });

});

body {
  min-height: 100vh;
  background: #eee;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.img {
  display: block;
  transition: transform 300ms ease-in-out;
  will-change: transform;
}

.lmb-clicked .img {
  transform: scale(0.9);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img class="img" src="https://picsum.photos/id/1/400/300">

【讨论】：

我假设你想要的是你的身体上的点击事件，而不是图像 - 再次查看你的问题，这个解决方案是不同的。

【解决方案5】：

这应该可行：

$(document).ready(function() {
    $("#banana").mousedown(function() {
    
        $("#banana").css("height","50vh");
    
    });
    
    $("#banana").mouseup(function() {
    
        $("#banana").css("height","100vh");
    
    });
});

.centered {
    
    text-align: center;
    display: block;
    
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<body>
    
        <div class = "centered">
            <img id = "banana" src="https://www.chiquita.com/wp-content/uploads/2019/12/Chiquita_Banana_Class_Extra_Yellow.jpg" alt="banana.png">
        </div>
    
</body>

【讨论】：