下一篇

网页设计

自动调整网页中图片大小适应网页

作者:shao65308 日期:2010-05-16

字体大小: 小中大

通过调整参数可自定义调整区域和图片预定义大小
该代码须放在页面底部，区域定义ID=zt

HTML代码

<script type="text/javascript">
fAutoImgSizeX(698, 670,"zt");
function fAutoImgSizeX(iWidth, iHeight, sId, bExact, bNoReload)
{
  var ImgEle, orange;
  if(!sId)oRange = document.images;
  else
  {
    if(!bExact) orange = document.getElementById(sId).getElementsByTagName('img'); else orange =[document.getElementById(sId)];
  }
  for(var i = 0; i < orange.length; i++ )
  {
    ImgEle = orange[i];
    if(bNoReload)
    {
      var Result =  fScaleSizeX(ImgEle.width, ImgEle.height,iWidth,iHeight);
      ImgEle.width = Result.Width;
      ImgEle.height = Result.Height;
    }
    else
    {
      var Temp = ImgEle.src;

ImgEle.onload =
      function(e)
      {
        var ImgEle = this;
        var Result =  fScaleSizeX(ImgEle.width, ImgEle.height,iWidth,iHeight);
        ImgEle.width = Result.Width;
        ImgEle.height = Result.Height;
      };

ImgEle.src = Temp;
    }
  }
}

function fScaleSizeX(iOldWidth, iOldHeight, iNewWidth, iNewHeight)
{
 var Result = {};
 if(iOldWidth > iNewWidth && (iOldHeight < iOldWidth))
 {
  Result.Width = iNewWidth;
  Result.Height = iOldHeight - (iOldHeight/(iOldWidth/(iOldWidth - iNewWidth)));
 }
 else if(iOldHeight > iNewHeight && (iOldHeight > iOldWidth))
 {
  Result.Width = iOldWidth - (iOldWidth/(iOldHeight/(iOldHeight - iNewHeight)))
  Result.Height = iNewHeight;
 }
 else
 {
  Result.Width = iOldWidth; Result.Height = iOldHeight;
 }
 return Result;
}
</script>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: JS

相关日志:

评论: 0 | 引用: 0 | 查看次数: 2676

发表评论

你没有权限发表评论！

Powered By PJBlog3 v3.0.6.170 CopyRight 2005 - 2008, 封存记忆 2009 xhtml css | 赣ICP备12005301号