Question

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

我目前可以使用滚动/双指触摸板滚动，但我希望能够使用鼠标单击滚动。

我使用StackOverflow中的元素绘制了一个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，它是一个类.inner。

2）event将是undefined，因为您忘记将其传递给该函数。

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

3）.inner不会overflow导致其宽度等于图片的宽度。你想要的是滚动.outer。

＆＃13;

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

＆＃13;

.buttons {
  position: fixed;
  left: 0px;
  top: 0px;
}

.outer {
  width: 200px;
  overflow: scroll;
}

.inner {
  width: 550px;
  top: 25px;
  overflow-y: hidden;
  overflow-x: scroll;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: