使用 jquery 使用 HTML 按钮在全景图像上水平滚动

Question

寻找在大型全景图像（例如时间轴）上水平滚动的解决方案。

我目前可以使用 scroll/two-finger 触摸板进行滚动，但我希望能够使用鼠标单击进行滚动。

我使用 Whosebug 中的元素编写了一个 JSFiddle，但我无法让它工作。

HTML:

<div class="outer">
 <div class="buttons">
  <button id="left">LEFT</button>
  <button id="right">RIGHT</button>
 </div>
 <div class="inner">
  <img src="https://via.placeholder.com/550x300">
 </div>
</div>

JS:

$('#right').click(function() {
  event.preventDefault();
  $('#inner').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

 $('#left').click(function() {
  event.preventDefault();
  $('#inner').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

CSS:

.buttons {
  position: fixed;
  left: 0px;
  top: 0px;
}

.outer {
  width: 200px;
  overflow: scroll;
}

.inner {
  width: 550px;
  top: 25px;
  overflow-y: hidden;
  overflow-x: scroll;
}

如有任何帮助，我们将不胜感激。

https://jsfiddle.net/phkst96c/2/

Answer 1

1)HTML里面没有#inner，是class.inner.

2) event 将是 undefined 因为您忘记将它传递给函数。

$('#right').click(function(event) {
  event.preventDefault();
  $('.outer').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

3) .inner 不会 overflow 因为它的宽度等于图像的宽度。你想要的是滚动 .outer.

$('#right').click(function(event) {
  event.preventDefault();
  $('.outer').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

 $('#left').click(function(event) {
  event.preventDefault();
  $('.outer').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

.buttons {
  position: fixed;
  left: 0px;
  top: 0px;
}

.outer {
  width: 200px;
  overflow: scroll;
}

.inner {
  width: 550px;
  top: 25px;
  overflow-y: hidden;
  overflow-x: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="buttons">
<button id="left">LEFT</button>
<button id="right">RIGHT</button>
</div>
<div class="inner">
  <img src="http://via.placeholder.com/550x300">
</div>
</div>

使用 jquery 使用 HTML 按钮在全景图像上水平滚动

Horizontal scroll on panoramic image with HTML buttons using jquery

jquery

scroll

horizontal-scrolling