Die Beispiele in diesem Artikel teilen das Bild langsam und reduzieren den JS -Implementierungscode für Ihre Referenz. Der spezifische Inhalt ist wie folgt
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> Langsames Skalieren von Bildern </title> </head> <script> Fenster. var btn_small = document.getElementById ("klein"); var pic = document.getElementById ("pic"); // langsam zoom btn_big.onclick = function () {var width = parseInt (pic.style.width); var i = width; var count = 0; Konsole.log (Breite); 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. }; // langsam verkleinern btn_small.onclick = function () {var width = parseInt (pic.style.width); var count = 0; if (width == 10) {alert ("Das Bild ist bereits minimal !!"); false zurückgeben; } console.log (width); 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 in </button> <button id = "klein"> zoom </button> </div> </body> </html>Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.