开发学院网页设计 JavaScript 使用javascript函数完美控制页面图片显示大小阅读

使用javascript函数完美控制页面图片显示大小

　2008-05-08 19:58:28　来源：WEB开发网　　　

核心提示：使用 javascript 函数完美控制页面图片显示大小 By shawl.qiu 函数 fResizeImg(w, h, id) 功能说明: 1. 本函数实现了指定高宽度显示图片大小 2. 本函数实现了按比例显示指定的高宽度 3. 本函数实现了是否指定 id 进行操作, 若不指定 id, 默认为页面全部图片. 4.

使用 javascript 函数完美控制页面图片显示大小 By shawl.qiu 函数 fResizeImg(w, h, id) 功能说明: 1. 本函数实现了指定高宽度显示图片大小 2. 本函数实现了按比例显示指定的高宽度 3. 本函数实现了是否指定 id 进行操作, 若不指定 id, 默认为页面全部图片. 4. 本函数实现了自动添加单击事件 4.1 单击图片后弹出一个窗口显示图片 4.2 再单击弹出的窗口则关闭本窗口 5. 弹出窗口按图片大小居中显示 6. 完美支持 IE, Opera 浏览器, 但对 Firefox 支持不够完善(由于个人习惯, 鄙人不打算费精力去完善对 Firefox 的支持) 目录: 1. fResizeImg(w, h, id) 函数源码及调用演示 shawl.qiu 2006-10-27 http://blog.csdn.net/btbtd

使用 Javascript 函数完美控制页面图片显示大小 By shawl.qiu

函数 fResizeImg(w, h, id) 功能说明:
1. 本函数实现了指定高宽度显示图片大小
2. 本函数实现了按比例显示指定的高宽度
3. 本函数实现了是否指定 id 进行操作, 若不指定 id, 默认为页面全部图片.
4. 本函数实现了自动添加单击事件
4.1 单击图片后弹出一个窗口显示图片
4.2 再单击弹出的窗口则关闭本窗口
5. 弹出窗口按图片大小居中显示
6. 完美支持 IE, Opera 浏览器, 但对 Firefox 支持不够完善(由于个人习惯, 鄙人不打算费精力去完善对 Firefox 的支持)

目录:
1. fResizeImg(w, h, id) 函数源码及调用演示

shawl.qiu
2006-10-27

js 代码
<script type="text/javascript">　　
//<![CDATA[　　
window.onload=function(){　　
　 fResizeImg(500, 500, 'img');　　
　 //fResizeImg(500, 500);　　
}　　
　 /*------------------------------------------------------*\　
　　 * Subject: 使用 javascript 函数完美控制页面图片显示大小 By shawl.qiu　　
　　 * 使用:　
　　 * --------------------------------------　
　　 * 1. Javascript 脚本块　
　　 *　 window.onload=function(){　
　　 *　　　 fResizeImg(500, 500, 'img');　
　　 *　　　 //fResizeImg(500, 500);　
　　 *　 }　
　　 *　
　　 * 2. html body 标签　
　　 * <body >　
　　 * --------------------------------------　
　　 * 注: 必须在页面加载完毕后使用本函数(这是基本的客户端应用概念)　
　 \*-------------------------------------------------------*/　　
　 //---------------------------------begin function fResizeImg();　　
　 function fResizeImg(w, h, id){　　
　　　 var img='';　　
　　　 var obj;　　
　　　 if(id==undefined)obj=document.images;　　
　　　 else obj=document.getElementById(id).getElementsByTagName('img');　　
　　　　　　
　　　 for(var i=0; i<obj.length; i++){　　
　　　　　 img=obj[i];　　
　　　　　 if(img.width>w&&(img.height<img.width)){　　
　　　　　　　 img.height=img.height-(img.height/(img.width/(img.width-w)))　　
　　　　　　　 img.width=w;　　
　　　　　 }else if(img.height>h&&(img.height>img.width)){　　
　　　　　　　 img.width=img.width-(img.width/(img.height/(img.height-h)))　　
　　　　　　　 img.height=h;　　
　　　　　 }　　
　　　　　　　　
　　　　　 img.onclick=function(){　　
　　　　　　　 try{ imgPopup.close();} catch(e){}　　
　　　　　　　 imgPopup=open('#', 'imgurl', 'width=500, height=500, left='+(screen.availWidth-500)/2+　　
　　　　　　　 ', top='+(screen.availHeight-500)/2)　　
　　　　　　　 imgPopup.document.write('<script>document.onclick=function(){ close();} /* 单击关闭窗口 */ <\/script>');　　
　　　　　　　　　　
　　　　　　　 imgPopup.document.write('<img src="'+this.src+'"/>'+　　
　　　　　　　　　 '<script>'+　　
　　　　　　　　　　　 'var w, h;'+　　
　　　　　　　　　　　 'var img=document.images[0];'+　　
　　　　　　　　　　　 'if(navigator.appName=="Opera"){w=img.width+10; h=img.height+40} else {w=img.width+10; h=img.height+25};'+　　
　　　　　　　　　　　 'self.resizeTo(w, h);'+　　
　　　　　　　　　　　 'self.moveTo((screen.availWidth-img.width)/2,(screen.availHeight-img.height)/2)'+　　
　　　　　　　　　 '<\/script>'+　　
　　　　　　　　　 '<style>body{margin:0; padding:0;} .hd{visibility:hidden;}<\/style>');　　
　　　　　　　 imgPopup.document.write('<p class="hd">ok</p>');　　
　　　　　　　 imgPopup.document.close();　　
　　　　　　　 imgPopup.focus();　　
　　　　　 }　　
　　　 } // shawl.qiu script　　
　 }　　
　 //---------------------------------end function fResizeImg();　　
//]]>　　
</script>