按下LMB时如何使图像/ div变小？
[英]How to make image/div smaller when LMB is being pressed?
问题描述
So, I have an image in the middle of the page (where I want it to remain) and while I hold the LMB I want it to get a little bit smaller, then go back to its previous size when released.
所以，我在页面中间有一个图像（我希望它保留在那里），当我拿着LMB时，我希望它变小一点，然后 go 在发布时恢复到以前的大小。
Below the code:代码下方：
$(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>
I tried get that target using jQuery (but the position of the image changes and it is not centred anymore).我尝试使用 jQuery 获取该目标（但图像的 position 发生了变化，并且不再居中）。
Thanks in advance!提前致谢！
5 个解决方案
解决方案1
10 已采纳 2020-07-17 13:39:04
This is very easy to do with CSS only, using the :active pseudo-selector (that corresponds to "mousedown").仅使用 CSS 很容易做到这一点，使用:active伪选择器（对应于“mousedown”）。 Also why not use Flex for easy centering.还有为什么不使用 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
Try尝试
transform: scale(0.7)
instead of height.而不是高度。 It will be centered and it's more efficient (GPU usage)它将居中并且效率更高（GPU使用率）
解决方案3
2 2020-07-17 13:45:18
place the LMB on the image not the div and use width not height将 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
Add and remove a class to your body and transform your image indirectly:将 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
This should work:这应该有效：
$(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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.