文章/答案/技术大牛

发布

社区首页 >问答首页 >当LMB被按下时，如何使图像/div变小？

问当LMB被按下时，如何使图像/div变小？
EN

Stack Overflow用户

提问于 2020-07-17 13:29:50

回答 5查看 97关注 0票数 6

因此，我在页面中间有一个图像(我希望它保持不变)，当我持有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获取目标(但是图像的位置改变了，它不再以中心为中心)。

提前感谢！

css

jquery-click-event

javascript

html

jquery

回答 5

Stack Overflow用户

回答已采纳

发布于 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>

票数 10

Stack Overflow用户

发布于 2020-07-17 13:38:51

试一试

transform: scale(0.7)

而不是身高。它将居中，效率更高(GPU的使用)

票数 2

Stack Overflow用户

发布于 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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62955039

复制

相似问题

问当LMB被按下时，如何使图像/div变小？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当LMB被按下时，如何使图像/div变小？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当LMB被按下时，如何使图像/div变小？
EN