IMG在滚动时调整大小

Img resize on scroll

本文关键字：调整 滚动 IMG      更新时间：2023-09-26

如何在鼠标滚动时调整标题中的徽标（ es 宽度： 100px）的大小？

$('.logo').scroll(function() {
    $(this).width(100);
    $(this).off(); //removes the handler so that it only resizes once...
})
.header {
  background-color: black;
}
.logo {
  height:100px;
  width: 100%;
  background-image: url("http://unika.myarmah.it/skin/frontend/sns_simo/default/images/logo.png");
  background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="logo"></div>
</div>

只需使用 javascript：

为什么？因为它就像使用jQuery一样短。

更新 #1 -

在看到作者对上一个答案的评论后，我调整了我的示例以在页面顶部包含动画和重置。同样 - 只需使用 javascript，为了获得更好的性能优势，请使用 CSS 类，以便所有绘制在一个周期内完成。

更新 #1 jsfiddle - https://jsfiddle.net/113dn29z/16/

var logo = document.querySelector('.logo');
var handleResize = function(e) {
    if (document.body.scrollTop === 0) {
       logo.classList.remove("resize");
    } else {
       logo.classList.add("resize");
    }
};
document.addEventListener('scroll', handleResize);
<小时 /> 
<div class="header">
   <div class="logo">
   </div>
</div>
<小时 /> 
body {
  height: 9999px;
  overflow: auto;
}
.header {
  background-color: black;
}
.logo {
  margin-top: 200px;
  height:100px;
  width: 100%;
  background-color: red;
  background-repeat: no-repeat;
  transition: width 0.2s ease;
}
.logo.resize {
  width: 100px;
}
<小时 />

旧的 jsFiddle 示例 - https://jsfiddle.net/113dn29z/10/

var logoHasResized = false;
$(document).on('scroll', function (e) {
    if (window.scrollY == 0) {
        $('.logo').animate({'width': '100%'}, 250);
        logoHasResized = false;
    } else if (logoHasResized == false) {
        $('.logo').animate({'width': 100}, 250);
        logoHasResized = true;
    }
});

编辑：由于您希望它在滚动到页面顶部时返回，因此我添加了检查以查看动画是否已发生，因为您不希望它不断触发。

相关文章：