OnScroll放大图像

Question

在我的应用程序上，我有10个图像，它们都是200px 200px，当我滚动时，我想将顶部的图像增加到400px x 400px

到目前为止，我有以下内容来检查我是否滚动到div上以更改大小：

http://jsfiddle.net/c02m1q7w/6/

    $.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语句，我想要增加屏幕的大小，但是没有成功。

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/

希望这能有所帮助。