자바 스크립트를 사용하여 iboooks epub에서 현재보기 페이지의 페이지 번호를 찾으십시오.

Question

ibooks epub에 대한 라이트 박스 스타일 div 요소를 작성 중입니다. 나는 div가 현재보고있는 페이지에 표시되도록하고 싶습니다. 이미지가 전자 서적 2 페이지에있는 경우 라이트 박스를 2 페이지에 표시하고 싶습니다. 내가 div 너비와 높이 화면을 채우기 위해 설정했습니다.

이미지가있는 페이지 번호를 알고있는 경우 div의 고정 된 값을 수동으로 설정할 수 있습니다. 내 장치의 창 크기는 460 픽셀입니다. 따라서 2 페이지의 이미지의 경우 상단이 2 페이지의 시작 부분 인 460이어야합니다.

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

그러나 전자 책은 사용자가 텍스트의 크기를 더 크게 또는 더 작게 변경할 수 있으므로 동적으로 달라 지므로 페이지가 무너질 수 있습니다. 현재 페이지를 기반으로 동적으로 상단을 설정하는 방법이 필요합니다. 나는 현재 페이지 번호가보고있는 알고있는 경우에, 나는

나는 현재 페이지를 계산하는 window.pageYOffset를 사용하여 시도

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

에 사업부의 상단을 설정할 수 있지만 페이지가 스크롤되지 않는 한이 항상 0 값을 제공 서적에 불행히도 페이지 번호에 액세스하는 데 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; 

내 라이트 박스 사업부는 전체 시청 영역을 다루고 있지만 중심으로 한 작은 하나를 원한다면, 당신은 창 높이의 추가 절반을 추가 한 다음으로 위쪽 여백을 설정해야 절반 네가 원하는 높이의 음수.

예를 들어 빛 상자는 다음 lightboxtop이 var lightboxTop = (curpage*winHeight)+(winHeight*.5); var topMargin = "-100px";

그것은 일부를 tweeked해야 할 수도있을 것입니다, X 200 (200) 인 경우,하지만 전반적으로는 페이지 수를 결정하기 위해 작동합니다.