任何人都知道如何在点击时上下调整图像大小。 示例：nrk.no
【问题讨论】：
标签： javascript jquery image
您作为示例提供的网站使用 CSS 过渡来使它们的一些图像放大和缩小。您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
了解更多关于 CSS 过渡的信息下面是一个使用 JQuery 的简单示例。当您单击 Google 徽标时，它会变大，当您再次单击它时，它会缩小。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.box img {
transition: width .4s,margin .4s,max-width .4s;
transition-property: width, margin, max-width;
transition-duration: 0.4s, 0.4s, 0.4s;
transition-timing-function: ease, ease, ease;
transition-delay: 0s, 0s, 0s;
}
.box img.clicked{
width: 500px;
}
</style>
<script>
$(function(){
$('.box img').on('click', function() {
$(this).toggleClass('clicked');
});
});
</script>
</head>
<body>
<div class="box">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
</body>
</html>
【讨论】：