Os exemplos deste artigo compartilham a imagem lentamente aumentam e reduzem o código de implementação do JS para sua referência. O conteúdo específico é o seguinte
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> escala lenta de imagens </ititle> </ad Head> <cript> window.onload = function () {var Btn_big = document.gelementByid ("big"); var btn_small = document.getElementById ("pequeno"); var pic = document.getElementById ("pic"); // zoom lentamente btn_big.onClick = function () {var width = parseint (pic.style.width); var i = largura; var count = 0; console.log (largura); 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 = n; }; // encolher lentamente btn_small.onClick = function () {var width = parseint (pic.style.width); var count = 0; if (width == 10) {alert ("A imagem já é mínima !!"); retornar falso; } console.log (largura); var timer2 = setInterval (function () {count ++; largura--; pic.style.width = width+"%"; if (count == 10) {clearInterval (timer2);} else if (largura <10) {btn_small.onClick = null;}}, 13); }}} </script> <yoy> #pic {width: 20%; } </style> <body> <div id = "pic"> <img src = "3.pic.jpg"> </div> <div> <button id = "big"> zoom em </button> <button id = "small"> zoom fora </button> </div> </body> </html>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.