この記事の例は、画像をゆっくりと拡大し、参照のためのJS実装コードを削減します。特定のコンテンツは次のとおりです
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>写真のスロースケーリング</title> </head> <script> windol.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 = width; var count = 0; console.log（width）; 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（ "画像はすでに最小限です!!"）; falseを返します。 } 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 = "small"> button> </div> </body> </html>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。