이 기사의 예제는 이미지를 서서히 확대하고 참조의 JS 구현 코드를 줄입니다. 특정 내용은 다음과 같습니다
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 사진의 느린 스케일링 </title> </head> <cript> wind 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;}, 13); }; // 천천히 축소 btn_small.onclick = function () {var width = parseint (pic.style.width); var count = 0; if (width == 10) {alert ( "그림은 이미 최소 !!"); 거짓을 반환합니다. } console.log (너비); var timer2 = setInterval (function () {count ++; 너비-; pic.style.width = width+"%"; if (count == 10) {clearinterval (timer2);} else if (width <10) {btn_small.onclick = null;}}, 13); }}} </script> <tyle> #pic {너비 : 20%; }.위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.