var observer = new MutationObserver(function(mutationsList, observer) { // 处理样式变化的回调函数 for (var mutation of mutationsList) { if (mutation.type === "attributes" && mutation.attributeName === "style") { var currentPage = flipbook.turn("page"); if (currentPage === 1) { var currentAngle = getRotationAngle($(".page[data-page='1']")[0]); console.log("封面当前角度:", currentAngle); } } } }); // 配置观察选项 var config = { attributes: true }; // 监听封面页面的样式变化 observer.observe($(".page[data-page='1']")[0], config); // 获取元素的旋转角度 function getRotationAngle(element) { var matrix = new DOMMatrix(getComputedStyle(element).transform); return Math.round(Math.atan2(matrix.b, matrix.a) * (180 / Math.PI)); }
时间: 2024-04-14 14:30:21 浏览: 102
根据你提供的代码,它看起来是基于之前的回答做了一些修改。这段代码使用了MutationObserver来监听封面页面样式的变化,并在翻到封面页时获取实时角度变化。
其中的`flipbook.turn("page")`需要改为`book.turn("page")`,以匹配之前创建的书籍对象。
以下是修改后的代码:
```html
<script>
$(document).ready(function() {
// 初始化书籍
var book = $("#book").turn();
// 添加9页页面
for (var i = 0; i < 9; i++) {
book.turn("addPage", "<div>Page " + (i+1) + "</div>");
}
// 设置封面颜色为绿色
book.turn("page", 1).css("background-color", "green");
// 创建MutationObserver实例
var observer = new MutationObserver(function(mutationsList, observer) {
// 处理样式变化的回调函数
for (var mutation of mutationsList) {
if (mutation.type === "attributes" && mutation.attributeName === "style") {
var currentPage = book.turn("page");
if (currentPage === 1) {
var currentAngle = getRotationAngle($(".page[data-page='1']")[0]);
console.log("封面当前角度:", currentAngle);
}
}
}
});
// 配置观察选项
var config = { attributes: true };
// 监听封面页面的样式变化
observer.observe($(".page[data-page='1']")[0], config);
// 获取元素的旋转角度
function getRotationAngle(element) {
var matrix = new DOMMatrix(getComputedStyle(element).transform);
return Math.round(Math.atan2(matrix.b, matrix.a) * (180 / Math.PI));
}
});
</script>
```
请确保在使用此代码时,已经正确引入了turn.js库,并且将上述代码与之前提供的HTML代码结合在一起。
保存并运行代码,当翻到封面页时,你将在控制台中实时获取封面页的角度变化。
阅读全文