Question

在我的应用程序上，我有10张图像均为200px x 200px，当我滚动时，我想将顶部图像增加到400px x 400px

到目前为止，我可以检查我是否正在滚动到div上以更改大小：

    $.fn.isOnScreen = function(){

    var win = $(window);

    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

$(window).scroll(function(){
    if($('#boxorange').isOnScreen() == true){
        $('#boxorange').css({"height":"400px"}); 
      $('#boxorange').css({"width":"400px"}); 
    } else{
            $('#boxorange').css({"height":"200px"}); 
        $('#boxorange').css({"width":"200px"});     }
});

但是每次都没有创建单独的if语句时，无论哪个div位于屏幕顶部，我都希望增加大小，但是我没有运气

Answer 1

您指的是鼠标滚轮。您可能会考虑以下代码：

$(window).on("wheel", function(e) {
  if (e.originalEvent.wheelDelta / 120 > 0) {
    console.log('Wheel Up');
  } else {
    console.log('Wheel Down');
  }
});

查看更多：https://developer.mozilla.org/en-US/docs/Web/Events/wheel

工作示例：http://jsfiddle.net/Twisty/6jexbn07/

希望这会有所帮助。

OnScroll放大图像

1 个答案: