首頁 > 開發者 > JavaScript
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>JavaScript圖片等比例縮放</title><script src="http://files.cnblogs.com/lostboy/utils.js" type="text/javascript"></script></head><body><div class="pages" id="page"> <img id="imgid" src="http://pic1.win4000.com/pic/1/7a/5b7d288647.jpg" /> <img id="imgid-thumb" src="http://pic1.win4000.com/pic/1/7a/5b7d288647.jpg" /> <div class="button"> <input type="button" name="btn-narrow" value="縮小圖片" /> </div></div><script type="text/javascript"> window.onload = function () { var img = document.getElementById("imgid"); var imgthumb = document.getElementById("imgid-thumb"); imgResize(img, 320, 480); imgResize(imgthumb, 100, 100); //點擊縮小圖片按鈕 var btnObj = document.getElementsByName("btn-narrow")[0]; btnObj.onclick = function () { if (btnObj.value == "縮小圖片") { btnObj.value = "放大圖片"; imgResize(img, 160, 240); } else { btnObj.value = "縮小圖片"; imgResize(img, 320, 480); } } }</script></body></html>
下面有運行效果，大家可以看看
JavaScript圖片等比例縮放
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
