Les exemples de cet article partagent l'image à élargir lentement et à réduire le code d'implémentation JS pour votre référence. Le contenu spécifique est le suivant
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tit-title> La mise à l'échelle lente des images </ title> </ad> <cript> window.onload = function () {var btn_big = document.getElementByid ("big"); var btn_small = document.getElementById ("small"); var pic = document.getElementById ("pic"); // zoom lentement btn_big.onclick = function () {var width = paSeInt (pic.style.width); var i = largeur; Var Count = 0; console.log (largeur); 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); }; // rétrécir lentement btn_small.onclick = function () {var width = paSeInt (pic.style.width); Var Count = 0; if (width == 10) {alert ("l'image est déjà minime !!"); retourne false; } console.log (largeur); 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 </ftont> <Button id = "small"> zoom out </utton> </div> </ body> </html>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.