ตัวอย่างในบทความนี้แบ่งปันภาพที่ขยายตัวช้าๆและลดรหัสการใช้งาน JS สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> การปรับขนาดภาพช้า </title> </head> <pristm> window.onload = function () {var btn_big = document.getElementById ("big"); var btn_small = document.getElementById ("เล็ก"); var pic = document.getElementById ("pic"); // ค่อยๆซูม btn_big.onclick = function () {var width = parseint (pic.style.width); var i = ความกว้าง; count var = 0; console.log (ความกว้าง); var timer = setInterval (function () {count ++; i ++; pic.style.width = i+"%"; ถ้า (count == 10) {clearinterval (ตัวจับเวลา);} อื่นถ้า (i> 50) {btn_big.onclick = function (e) {btn_big.on - // ค่อยๆหด btn_small.onclick = function () {var width = parseint (pic.style.width); count var = 0; if (width == 10) {Alert ("รูปภาพนั้นน้อยที่สุดแล้ว !!"); กลับเท็จ; } console.log (ความกว้าง); var timer2 = setInterval (function () {count ++; width--; pic.style.width = width+"%"; ถ้า (count == 10) {clearinterval (timer2);} อื่นถ้า (ความกว้าง <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"> ซูมเข้า </button> <ปุ่ม id = "เล็ก"> ซูมออก </button> </div> </body> </html>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น