JavaScript - Botones zoom progresivos

 
Vista:
sin imagen de perfil
Val: 6
Ha disminuido su posición en 42 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Botones zoom progresivos

Publicado por shwan (3 intervenciones) el 15/03/2019 22:07:11
Holas!, necesito ayuda con un código en javascript, quiero hacer 2 botones, uno Zoom in y otro zoom out para que se haga un zoom a un objeto. Se que se puede con solo agregar el estilo "zoom" con javascript.. pero lo que necesito es que cada vez que se de clic a los botones aumente o disminuya el zoom progresivamente por ejemplo un zoom de un 10% hasta un tope mínimo y máximo. Algo así como el Ctrl + y Ctrl - de los navegadores.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 6
Ha disminuido su posición en 42 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Botones zoom progresivos

Publicado por shwan (3 intervenciones) el 18/03/2019 17:34:52
Me sirvió perfecto, pero me encantaria q me ayudaras con un pequeño detalle, me gustaria aplicarle una transición al contenedor al hacer el zoom, ya le aplique css transition pero no funciona.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
var zoom=1;
 
document.getElementById("mas").addEventListener("click",function(e){
    zoom+=.10;
    resize();
});
document.getElementById("menos").addEventListener("click",function(e){
    if(zoom>0.2) {
        zoom-=.10;
        resize();
    }
});
 
function resize() {
    document.getElementById("contenedor").style.zoom=zoom;
    document.getElementById("value").innerHTML=zoom.toFixed(2)+"%";
}
</script>

gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 1.522
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Botones zoom progresivos

Publicado por ScriptShow (646 intervenciones) el 17/03/2019 23:53:57
Saludos,

veamos un ejemplo compatible, adaptable, sencillo...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
var t = 10;
function test(z){
demo = document.getElementById("demo");
if (z == 0 && t > 10) t -= 2;
if (z == 1 && t < 100) t += 2;
 
demo.style.width = t + "px";
demo.style.height = t + "px";
}
</script>
 
<button type="button" onclick="test(1)">Zoom +</button>
<button type="button" onclick="test(0)">Zoom -</button>
<br><br>
<div id="demo" style="width:10px;height:10px;background:#D4D4D4"></div>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 6
Ha disminuido su posición en 42 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Botones zoom progresivos

Publicado por shwan (3 intervenciones) el 18/03/2019 17:59:17
Super, pero es un poco complicado (al menos para mi) cuando tienes un contenedor el cual escala su width diferente a su height. =(
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 1.522
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Botones zoom progresivos

Publicado por ScriptShow (646 intervenciones) el 19/03/2019 20:21:57
Si es proporcional ó no, solo tienes que poner los valores para width y height en JavaScript...
También podemos utilizar 2 Class en CSS y cambiarlas/aplicarlas con JavaScript...

Por otro lado, si has pensado en incluir efectos, aquí tienes un ejemplo completo y operativo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
#demo {-webkit-transition:all 2s;-moz-transition:all 2s;-ms-transition:all 2s;transition:all 2s;}
</style>
<script>
var z;
function test(z){
var demo = document.getElementById("demo");
if (z == 0) {demo.style.width = "20px"; demo.style.height = "20px"}
if (z == 1) {demo.style.width = "400px"; demo.style.height = "200px"}
}
</script>
 
<button type="button" onclick="test(1)">Zoom int</button>
<button type="button" onclick="test(0)">Zoom out</button>
<br><br>
<div id="demo" style="width:20px;height:20px;background:#4DDDD4"></div>

Espero sea útil.

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar