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

王朝html/css/js·作者佚名  2008-06-01
窄屏简体版  字體: |||超大  

使用 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 onload="fResizeImg(500, 500, 'textMain');" >

* --------------------------------------

* 注: 必须在页面加载完毕后使用本函数(这是基本的客户端应用概念)

\*-------------------------------------------------------*/

//---------------------------------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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航