Примеры в этой статье разделяют изображение медленно увеличивают и уменьшают код реализации JS для вашей ссылки. Конкретный контент заключается в следующем
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> медленное масштабирование изображений </title> </head> <script> window.onload = function () {var btn_big = document.getelementbyid ("big"); var btn_small = document.getElementbyId ("small"); var pic = document.getElementbyId ("pic"); // медленно увеличить btn_big.onclick = function () {var width = parseint (pic.style.width); var i = ширина; var count = 0; console.log (ширина); 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; }; // медленно сокращается btn_small.onclick = function () {var width = parseint (pic.style.width); var count = 0; if (width == 10) {alert («картинка уже минимальна !!»); вернуть ложь; } console.log (ширина); 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 {ширина: 20%; } </style> <body> <div id = "pic"> <img src = "3.pic.jpg"> </div> <div> <button id = "big"> Zoom in </button> <button id = "small"> Zoom Out </button> </div> </body> </html>Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.