Question

我正在为ibooks epub构建一个灯箱样式div元素。我希望div显示在当时正在查看的当前页面上。如果图像位于电子书的第二页，我希望第二页上的灯箱显示。我设置div宽度和高度来填充屏幕。

document.getElementById("LightBoxDiv").style.width=window.innerWidth+"px";
document.getElementById("LightBoxDiv").style.height=window.innerHeight+"px";

如果我知道图像所在的页码，我可以手动设置div的固定最高值。我的设备窗口高度为460px。因此，对于第二页上的图像，顶部应该是460，这是第二页的开头。

document.getElementById("LightBoxDiv").style.top="460px";

然而，由于电子书是动态的，因为用户可以更大或更小地改变文本的大小，因此可能发生某些事情的页面会发生变化。我需要一种基于当前页面动态设置顶部的方法。如果我知道正在查看的当前页码，我可以将div顶部设置为

var lighboxHeight = (pagenumber-1)*window.innerHeight;

我尝试使用window.pageYOffset来计算当前页面，但由于页面不在电子书中滚动，因此总是给出0值。不幸的是，我找不到任何文档或任何描述如何使用javascript访问页码的参考。有没有人知道如何使用javascript访问或查找ibooks epub中的当前页码？

谢谢， - 克里斯托弗

Answer 1

我相信我找到了解决方案。 This question/answer helped a lot.

//window height
var winHeight = window.innerHeight;
//top of object to be placed in the lightbox
//can be any object
var curOjbTop = document.getElementById(svgId).getBoundingClientRect().top;
//body y value
var bodyTop = document.body.getBoundingClientRect().top;
//amount the object is shifted vertically downward from the top of the body element
var offset = curObjTop - bodyTop;
//page number of the object 
//this is actually 1 less than the true page number
//it basically starts the page count at 0, but for actual page number add 1
var curPage = Math.floor(offset/winHeight);
//this sets the top edge of the lightbox at y=0 on the page the item is on
var lightboxTop = curPage*winHeight;
document.getElementById("LightBoxDiv").style.top=lightboxTop;

我的灯箱div覆盖了整个观看区域，但是如果你想要一个较小的中心，你需要增加一半窗口高度，然后将上边距设置为高度负值的一半你想要的。

例如，如果灯箱是200 x 200，那么你的lightboxtop就是 var lightboxTop = (curpage*winHeight)+(winHeight*.5); var topMargin = "-100px";

可能需要稍微调整一下，但总的来说它应该可以确定页码。

使用javascript查找ibooks epub中当前视图页面的页码

1 个答案: