代码之家 › 专栏 › 技术社区 › osteopathx

使用jquery通过HTML按钮水平滚动全景图像

horizontal-scrolling scroll jquery

0

osteopathx · 技术社区 · 6 年前

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

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

我使用StackOverflow中的元素绘制了一个JSFIDLE,但我无法实现这一点。

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/

1 回复 | 直到 6 年前

1

Hikarunomemory Bhavana 6 年前

1) 没有 #inner 在HTML中,它是一个类 .inner 。

(2) event 可能是 undefined 因为您忘记将其传递给函数。

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

(3) 内部的 不会 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>