この記事の例は、画像をゆっくりと拡大し、参照のための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をもっとサポートすることを願っています。