Question

我正在使用pdf.js来显示一些PDF。一切正常，但是现在我想在单击上一个/下一个按钮时添加一些改进，例如效果。

我想在页面之间进行淡入/淡入/淡出过渡，但是我不知道该怎么做。我是JS的新手，所以我需要帮助。

pdf呈现为the-canvas div

这是我的代码：

function queueRenderPage(num) {
  if (pageRendering) {
    pageNumPending = num;
  } else {
    renderPage(num);
  }
}



/**
 * Displays previous page.
 */
function onPrevPage() {
  if (pageNum <= 1) {
    return;
  }
  pageNum--;
  queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);

/**
 * Displays next page.
 */
function onNextPage() {
  if (pageNum >= pdfDoc.numPages) {
    return;
  }
  pageNum++;
  queueRenderPage(pageNum);
}

document.getElementById('next').addEventListener('click', onNextPage);

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

<canvas id="the-canvas"></canvas>

<div id="prev" class="prev-next">&lt;</div>
<div id="next" class="prev-next">&gt;</div>

Answer 1

独自解决。我认为这不是很好的解决方案，但仍然...

$('#next').click(function(){
  $("#the-canvas").fadeOut(0);
  $("#the-canvas").fadeIn(500);

  onNextPage();
})

然后对id="prev"执行相同的操作。

pdf.js-JavaScript中的页面淡入/淡出效果

1 个答案: