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

最新推荐文章于 2024-07-08 16:22:29 发布

btbtd

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量2k

点赞数

文章标签： javascript function firefox opera 浏览器脚本

本文链接：https://blog.csdn.net/btbtd/article/details/1353481

版权

MS JScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

使用 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.οnlοad=function(){
fResizeImg(500, 500, 'img');
//fResizeImg(500, 500);
}
/*------------------------------------------------------*/
* Subject: 使用 javascript 函数完美控制页面图片显示大小 By shawl.qiu
* 使用:
* --------------------------------------
* 1. Javascript 脚本块
* window.οnlοad=function(){
* fResizeImg(500, 500, 'img');
* //fResizeImg(500, 500);
* }
*
* 2. html body 标签
* <body οnlοad="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.οnclick=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.οnclick=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>

btbtd

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
使用 javascript 函数完美控制页面图片显示大小 By shawl.qiu

使用 javascript 函数完美控制页面图片显示大小 By shawl.qiu 函数 fResizeImg(w, h, id) 功能说明:1. 本函数实现了指定高宽度显示图片大小2. 本函数实现了按比例显示指定的高宽度3. 本函数实现了是否指定 id 进行操作, 若不指定 id, 默认为页面全部图片.4. 本函数实现了自动添加单击事件4.1 单击图片后弹出一个窗口显示图片4.2
复制链接

扫一扫