首頁 > 開發者 > JavaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>動態擷取縮放圖片的長度、寬度和顯示比例</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="PurpleEndurer">
<SCRIPT LANGUAGE="JavaScript">
<!--
//縮放對象. 調用方式: zoomObj(this)
function zoomObj(o)
{
var zoom = parseInt(o.style.zoom, 10)||100;
zoom += event.wheelDelta/12;
if (zoom>0)
{
o.style.zoom=zoom+'%';
}
return false;
}
var iOriginalWidth, iOriginalHeight; //存放圖片原始長度、寬度
//動態顯示圖片的長度、寬度和顯示比例
function dispCurrentSize()
{
var zoom = document.all.idImg.style.zoom;
zoom = eval(zoom.substring(0, zoom.length-1));
var iWidth = zoom * document.all.idImg.width;
var iHeight = zoom * document.all.idImg.height;
document.all.idPicCurrentSize.innerHTML = "圖片當前大小 長：" + Math.ceil(iWidth/100) + " 高：" + Math.ceil(iHeight/100) + " 顯示比例：" + Math.ceil((iWidth / iOriginalWidth)) + "%";
}
//顯示圖片原始長度、寬度
function dispOriginalSize(oImg)
{
iOriginalWidth = oImg.width;
iOriginalHeight = oImg.height;
document.all.idPicOriginalSize.innerHTML = "圖片原始大小 長：" + iOriginalWidth + " 高：" + iOriginalHeight;
document.all.idImg.style.zoom = "100%";
dispCurrentSize();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<img src="http://www.hcny.gov.cn/images/logo.gif" ID="idImg" onLoad="dispOriginalSize(this);" onMouseWheel="zoomObj(this);dispCurrentSize();">
<div ID="idPicOriginalSize"></div><P><P>
<div ID="idPicCurrentSize"></div><P><P>
</BODY>
</HTML>
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
