Question

我正在使用Jquery和一个名为waypoints的Jquery插件。我的目标是向下滚动页面，直到到达特定的航路点，然后在用户使用鼠标滚轮滚动时停止页面的滚动并在该航路点上实现相册。

在上面的示例中，我设法到达了要使其停止并使其页面停止的区域。很好，但是当我尝试交换图像时，这不能流畅地工作或根本不起作用，并且图像跳动很大。

我正在努力实现类似http://replay.ores-group.com/archives/philips-bt6000/

的目标

// Gallery stop and slider animation
    const waypoint = new Waypoint({
      element: document.getElementById('gallery-scroll'),
      handler: function() {
        $("body").css("overflow", "hidden");
        $("#info-image1").attr("src","https://via.placeholder.com/300.png/f18c9c/");
        $(document).bind('mousewheel', function(evt) {
            var delta = evt.originalEvent.wheelDelta
            if(delta > 0){
              $("body").css("overflow", "auto");
            } else {
              if($("#info-image1").attr('src') === "https://via.placeholder.com/300.png/f18c9c/") {
                setTimeout(function(){
                  $("#info-image1").attr("src","https://via.placeholder.com/300.png/333/"); 
              }, 2000); 
              } if($("#info-image1").attr('src') === "https://via.placeholder.com/300.png/333/") {
                setTimeout(function(){
                  $("#info-image1").attr("src","https://via.placeholder.com/300.png/fff/"); 
              }, 2000); 
                $("body").css("overflow", "auto");
              }
            }
        });
      }
    });

我的问题是，在上面的代码中，是否可以通过这种方式将鼠标滚轮事件绑定到图库？还是使用CSS动画之类的其他东西来实现此目标会更好？

jQuery将Mousewheel事件绑定到图片库

0 个答案: