Los ejemplos de este artículo comparten la imagen en ampliar lentamente y reducen el código de implementación JS para su referencia. El contenido específico es el siguiente
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> escala lenta de imágenes </title> </head> <script> window.onload = function () {var btn_big = document.getElementById ("big"); var btn_small = document.getElementById ("pequeño"); var pic = document.getElementById ("Pic"); // zoom lentamente btn_big.onclick = function () {var width = parseInt (pic.style.width); var i = ancho; Var Count = 0; console.log (ancho); var timer = setInterval (function () {count ++; i ++; pic.Style.Width = i+"%"; if (count == 10) {ClearInterval (Timer);} else if (i> 50) {btn_big.onclick = function (e) {btn_big.onclick = null;};}}, 13); }; // encoge lentamente btn_small.onclick = function () {var width = parseInt (pic.style.width); Var Count = 0; if (width == 10) {alerta ("La imagen ya es mínima !!"); devolver falso; } console.log (ancho); var timer2 = setInterval (function () {count ++; width--; pic.style.width = width+"%"; if (count == 10) {clearInterval (timer2);} else if (width <10) {btn_small.onclick = null;}}, 13); }}} </script> <style> #Pic {Width: 20%; } </style> <body> <div id = "pic"> <img src = "3.pic.jpg"> </div> <div> <button id = "big"> zoom en </botón> <botón id = "pequeño"> zoom out </boton> </div> </body> </html>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.