Question

我使用javascript / jquery构建一个简单的缩放效果，但很难使这个变得更平滑。

document.addEventListener("mousewheel", mouseWheelHandler, false);
document.addEventListener("DOMMouseScroll", mouseWheelHandler, false);
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

当delta > 0我增加容器的宽度时，delta < 0时我减小了容器的宽度。有关基本示例，请参阅代码段：

document.addEventListener("mousewheel", mouseWheelHandler, false);
document.addEventListener("DOMMouseScroll", mouseWheelHandler, false);
function mouseWheelHandler(e) {
  var current_width = $('div').width();
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  if(delta == -1) {
      $('div').css('width', current_width / 1.1);
  } else {
      $('div').css('width', current_width * 1.1);
  }
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-image:url(https://placehold.it/500x500);height:500px;width:500px;">

我知道想要收集用户表演的卷轴并且只滚动一次。我尝试使用setTimeout()并将其设置为1000毫秒，将所有delta值收集到一个变量中，然后经常放大：

document.addEventListener("mousewheel", mouseWheelHandler, false);
document.addEventListener("DOMMouseScroll", mouseWheelHandler, false);
var zoom_factor = 0;
function mouseWheelHandler(e) {
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  setTimeout(function(){
    zoom_factor = zoom_factor + delta
    console.log(zoom_factor);
  }, 1000);
  zoom(zoom_factor);
}
     

function zoom(zoom_factor) {
  var current_width = $('div').width();
  var new_width = current_width;
  if(zoom_factor > 0) {
    for(var i = 0; i < zoom_factor; i++) {
      new_width = new_width * 1.1
    }
  } else if (zoom_factor < 0) {
    zoom_factor = zoom_factor * -1
    for(var i = 0; i < zoom_factor; i++) {
      new_width = new_width / 1.1
    }
  }
  $('div').css('width',new_width);
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div style="background-image:url(https://placehold.it/500x500);height:500px;width:500px;">

这不起作用，因为即使超时仍在通过，也会触发缩放效果。

在zoom()完成后是否有办法调用setTimeout()并且只调用一次？

Answer 1

试试这个：

var zoom_factor = 0;
var timeout;
function mouseWheelHandler(e) {
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  // reset timeout
  clearTimeout(timeout);

  timeout = setTimeout(function(){
    // call zoom() once
    zoom(zoom_factor);

    // reset zoomfactor
    zoom_factor = 0;
  }, 1000);

  // Calculate zoom factor
  zoom_factor = zoom_factor + delta;
}

Answer 2

settimeout()中的参数：

function mouseWheelHandler(e) {
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  setTimeout(function(){
    zoom_factor = zoom_factor + delta
    console.log(zoom_factor);
  }, 1000, zoom(zoom_factor));
}

document.addEventListener("mousewheel", mouseWheelHandler, false);
document.addEventListener("DOMMouseScroll", mouseWheelHandler, false);
var zoom_factor = 0;
function mouseWheelHandler(e) {
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  setTimeout(function(){
    zoom_factor = zoom_factor + delta
    console.log(zoom_factor);
  }, 10, zoom(zoom_factor));
}
     

function zoom(zoom_factor) {
  var current_width = $('div').width();
  var new_width = current_width;
  if(zoom_factor > 0) {
    for(var i = 0; i < zoom_factor; i++) {
      new_width = new_width * 1.1
    }
  } else if (zoom_factor < 0) {
    zoom_factor = zoom_factor * -1
    for(var i = 0; i < zoom_factor; i++) {
      new_width = new_width / 1.1
    }
  }
  $('div').css('width',new_width);
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div style="background-image:url(https://placehold.it/500x500);height:500px;width:500px;">

收集Mousewheeler触发器，然后调用函数

2 个答案: