按下LMB时如何使图像/ div变小？
[英]How to make image/div smaller when LMB is being pressed?
问题描述
所以，我在页面中间有一个图像（我希望它保留在那里），当我拿着LMB时，我希望它变小一点，然后 go 在发布时恢复到以前的大小。
代码下方：
$(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 获取该目标（但图像的 position 发生了变化，并且不再居中）。
提前致谢！
5 个解决方案
解决方案1
10 已采纳 2020-07-17 13:39:04
仅使用 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); }
<div class="container"><img src="https://via.placeholder.com/150"/></div>
解决方案2
2 2020-07-17 13:38:51
尝试
transform: scale(0.7)
而不是高度。 它将居中并且效率更高（GPU使用率）
解决方案3
2 2020-07-17 13:45:18
将 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
2 2020-07-17 13:47:32
将 class 添加和删除到您的身体并间接转换您的图像：
$(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
1 2020-07-17 13:44:37
这应该有效：
$(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>
如何在较小的 div 内制作图像中心（垂直和水平）
[英]How to make an image center (vertically & horizontally) inside a smaller div
按下字符键后如何使字符出现在div中
[英]How to make a character appear in a div when the character key has been pressed
如何制作一个按钮，按下时按钮会消失并弹出一个新的div
[英]How to make a button, when pressed the button will disappear and bring up a new div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.