通过滚动缩小div的高度和宽度? [英] Shrink both height and width of a div by scrolling?

问题描述

在向下滚动页面时是否可以同时缩小div的高度和宽度?例如，当用户向下滚动时，div大小从400px x 400px变为200px x 200px，同时保持在页面中心?我知道可以使用jQuery来缩小高度或宽度，但是在缩小两者上都没有看到任何东西.

Is it possible to shrink both the height and the width of a div simultaneously while scrolling down a page? For example, as the user scrolls down, the div size goes from 400px by 400px to 200px by 200px while staying in the center of the page? I know it's possible to shrink the height OR the width using jQuery, but I haven't seen anything on shrinking both.

推荐答案

您可以获取高度和宽度，将两者递减，然后在滚动事件中重新应用新值.

You can get the height and width, decrement both, and then reapply the new values inside of a scroll event.

var divToChange = $('#sizeShifter');
$(document).scroll(function(){
    var divHeight = divToChange.height();
    var divWidth = divToChange.width();
    divHeight-=5;
    divWidth-=5;
    divToChange.css({width:divWidth, height:divHeight});
});

您还可以在用户向上滚动时反转此效果.这会涉及到更多点，但是这里是一个有效的小提琴，可以帮助您入门.

You can also reverse this effect when the user scrolls up. This is a little more involved, but here is a working fiddle to get you started.

这篇关于通过滚动缩小div的高度和宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！