使用 javascript 函数 完美控制页面图片显示大小 By shawl.qiu
发表日期:2006-12-02
更新日期:2006-12-02
作者文章阅读次数:3693
使用 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
http://blog.csdn.net/btbtd
linenum
- <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>
这是什么,是存档.