热点推荐:ASP.Net | ADO.Net | VB.Net | Web服务器 | Access | MSSQL | MySQL | Oracle | .Net控件 | Win 9x | Win 2000 | Win 2003 | DOS | Unix | 注册表 | 应用其它 | 安装调试 | 基本操作 | 使用技巧 | 系统优化 |故障处理 | 个性风格 | 病毒安全 | 专杀工具
您现在的位置: 中华IT技术网 >> 开发语言 >> HTML >> 正文
全文
动态获取缩放图片的长宽和显示比例
作者:1024k    文章来源:本站原创    点击数:    更新时间:2007-8-30

<!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.1024k.cn/1024k_y/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>

相关文章
最新更新
编辑推荐
热门图片
频道大全
文章阅读排行
周排行
月排行