1

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

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

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

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

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

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

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

谢谢，--克里斯托弗

4

1 回答 1

0

我相信我找到了解决方案。 这个问题/答案很有帮助。 

//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，那么您的灯箱顶部将是 var lightboxTop = (curpage*winHeight)+(winHeight*.5); var topMargin = "-100px";

可能需要对其进行一些调整，但总体而言，它应该可以确定页码。

于 2014-07-19T03:29:35.673 回答