我想要的是在翻书的过程中一直输出角度的数据,就是翻书过程中角度一直在变化我需要的是拿到角度变化的变量,然后用来判断当角度达到70%最大角度是在控制台输出111
时间: 2024-04-14 19:27:53 浏览: 24
好的,我明白你的需求了。以下是修改后的代码,它会在翻书过程中输出角度变化的变量,并在角度达到70%最大角度时在控制台输出111:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#book {
width: 400px;
height: 600px;
background-color: #f0f0f0;
}
.page {
background-color: white;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.page-content {
padding: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/4.1.0/turn.min.js"></script>
</head>
<body>
<div id="book">
<div class="page" data-page="1">
<div class="page-content">
<h1>封面</h1>
<p>这是一本书的封面</p>
</div>
</div>
<div class="page" data-page="2">
<div class="page-content">
<h1>第一页</h1>
<p>这是第一页的内容</p>
</div>
</div>
<div class="page" data-page="3">
<div class="page-content">
<h1>第二页</h1>
<p>这是第二页的内容</p>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// 初始化书籍
var book = $("#book").turn({
width: "100%",
height: "100%",
autoCenter: true
});
// 创建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);
if (currentAngle >= 0.7 * 90) {
console.log(111);
}
}
}
}
});
// 配置观察选项
var config = { attributes: true };
// 监听封面页面的样式变化
observer.observe($(".page[data-page='1']")[0], config);
// 获取元素的旋转角度
function getRotationAngle(element) {
var matrix = new DOMMatrix(getComputedStyle(element).transform);
var angle = Math.round(Math.atan2(matrix.b, matrix.a) * (180 / Math.PI));
return angle;
}
});
</script>
</body>
</html>
```
在修改后的代码中,我们添加了一个新的条件判断,当封面页的角度达到70%最大角度(90度的70% = 63度)时,在控制台输出111。
请保存并在浏览器中打开HTML文件,然后翻动书籍的封面页。在控制台中,你将看到翻页过程中角度的实时变化,并在达到70%最大角度时输出111。