0
313
Views¿Cómo crear un ícono de acercar y alejar en la aplicación del matraz?
Creé una interfaz de usuario basada en frascos donde hay varios archivos html dentro de las plantillas y el archivo python main.py. A continuación se muestra una captura de pantalla de mi página web de interfaz de usuario:
Como puede ver, hay dos pestañas de navegación, Informes y Insight Engine.
En esta página, quiero hacer un botón de acercamiento y alejamiento en la esquina superior derecha. El botón Alejar reducirá el tamaño de la página web al 80 % y el botón Acercar aumentará el tamaño de la página web al 120 %. Deberían funcionar de manera similar a ctrl+ y ctrl- en Windows. Estos botones deberían estar disponibles para ambas pestañas de navegación.
Esta es mi estructura de directorios:
/static /design.css /templates /index.html /upload.html /engine.html /main.py¿Cómo puedo conseguir esto?
No adjunto ningún código porque no probé ninguna solución porque no encontré ninguna.
1 answers
Answer question0
Podrías usar la propiedad zoom CSS :
document.querySelector("#zoom").addEventListener("click", function(){ document.body.style.zoom = 1.0; }); document.querySelector("#zoomout").addEventListener("click", function(){ document.body.style.zoom = 0.8; }); document.querySelector("#zoomin").addEventListener("click", function(){ document.body.style.zoom = 1.2; }); <button id="zoomout">Zoom -</button> <button id="zoom">Restore zoom</button> <button id="zoomin">Zoom +</button>Tenga en cuenta que no es compatible con Firefox .