[英]turn.js issue with css zoom
我確實知道 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);
我在這個網站上找到了答案。 事件偵聽器未檢測到 class 更改,因此我們需要一個突變觀察者,盡管您可能仍然需要事件偵聽器:
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); });
.zoomed { width: 1383px;important: height; 900px:important; left: -411px;important: top; 200px !important; padding-bottom: 30px !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="zoomed" class="fa fa-search-plus"> </button>
好的,所以我設法通過在 css 中添加 class.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>
我在這個網站上找到了答案。 事件監聽器沒有檢測到 class 變化,所以我們需要一個突變觀察者。
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);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.