javascript - css缩放的turn.js问题
问题描述
我确实知道 turn.js 有它自己的缩放,但是我添加了一个简单的带有 css 缩放的缩放脚本。
它正在工作,我的意思是当您按下缩放按钮时,它会放大页面(并缩小),但我似乎无法弄清楚如何调整翻书的大小。
我确实有一个用于全屏的 eventListener,但它似乎不适用于缩放。(我知道这可能真的很简单,但我就是想不通。)
<button onclick="zoomed()" class="fa fa-search-plus" > </button>
<!-- Zoom -->
var zoom_el = document.getElementById("flipbook");
var zom= true;
function zoomed(){
if (zom == true) {
zoom_el.style.zoom = 1.5;
zoom_el.style.MozTransform = 'scale(1.5)';
zoom_el.style.WebkitTransform = 'scale(1.5)';
autoCenter: true
zom = false
}
else {
zoom_el.style.zoom= 1;
zoom_el.style.MozTransform = 'scale(1)';
zoom_el.style.WebkitTransform = 'scale(1)';
autoCenter: true
zom=true
}
}
<!-- EventListener -->
window.addEventListener('resize', function (e) {
flip.style.width = '';
flip.style.height = '';
$(flip).turn('size', flip.clientWidth, flip.clientHeight);
解决方案
好的,所以我设法通过在 css 类中添加 .zoomed 来正确编辑它
.zoomed{
width:1383px !important;
height:900px !important;
left:-411px !important;
top:200px !important;
padding-bottom:30px !important;
}
按钮
<button id="zoomed" class="fa fa-search-plus" > </button>
我在这个网站上找到了答案。事件监听器没有检测到类的变化,所以我们需要一个突变观察者。
const mainNode = document.getElementById('flipbook')
const toggleNode = document.getElementById('zoomed')
toggleNode.addEventListener('click', function() {
mainNode.classList.toggle('--zoomed')
})
function callback(mutationsList, observer) {
console.log('Mutations:', mutationsList)
console.log('Observer:', observer)
mutationsList.forEach(mutation => {
if (mutation.attributeName === 'class') {
zoomed_el.style.width = '';
zoomed_el.style.height = '';
autoCenter: true
$(zoomed_el).turn('size', zoomed_el.clientWidth, zoomed_el.clientHeight);
}
})
}
const mutationObserver = new MutationObserver(callback)
mutationObserver.observe(mainNode, { attributes: true })
你可能仍然需要事件监听器
window.addEventListener('resize', function (e) {
zoomed_el.style.width = '';
zoomed_el.style.height = '';
$(zoomed_el).turn('size', zoom_el.clientWidth, zoom_el.clientHeight);
});
推荐阅读
- angular - 具有 useFactory 的提供程序 LOCALE_ID 返回 null
- python - Python 解决 _mysql_exceptions.OperationalError: (2006, 'MySQL server has gone away') when using db models
- java - 当我将 Enum 实例变量设置为作为选项包含在 Enum 类本身中的值时,它无法解析为类型。为什么?
- python - Pycharm 不安装库 Pillow
- php - wamp和lamp的配置区别
- javascript - 无法读取未定义的属性“toDate”
- autohotkey - 如何处理所有活动监视器
- sas - 检测数据中的单位差异 (SAS)
- php - PHP:如何在 MySQL 5.7 中保存二进制字符串
- javascript - 通过 react 路由器将 prop 传递给组件