【原创】用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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

紫郢剑侠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值