如何使用javascript函数控制页面图片显示大小？
-
使用javascript函数完美控制页面图片显示大小Byshawl.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
- <scripttype="text/javascript">
- //<![CDATA[
- window.onload=function(){
- fResizeImg(500,500,'img');
- //fResizeImg(500,500);
- }
- /*------------------------------------------------------*/
- *Subject:使用javascript函数完美控制页面图片显示大小Byshawl.qiu
- *使用:
- *--------------------------------------
- *1.Javascript脚本块
- *window.onload=function(){
- *fResizeImg(500,500,'img');
- *//fResizeImg(500,500);
- *}
- *
- *2.htmlbody标签
- *<bodyonload="fResizeImg(500,500,'textMain');">
- *--------------------------------------
- *注:必须在页面加载完毕后使用本函数(这是基本的客户端应用概念)
- /*-------------------------------------------------------*/
- //---------------------------------beginfunctionfResizeImg();
- functionfResizeImg(w,h,id){
- varimg='';
- varobj;
- if(id==undefined)obj=document.images;
- elseobj=document.getElementById(id).getElementsByTagName('img');
- for(vari=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;
- }elseif(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('<imgsrc="'+this.src+'"/>'+
- '<script>'+
- 'varw,h;'+
- 'varimg=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('<pclass="hd">ok</p>');
- imgPopup.document.close();
- imgPopup.focus();
- }
- }//shawl.qiuscript
- }
- //---------------------------------endfunctionfResizeImg();
- //]]>
- </script>
本文地址：http://www.45fan.com/dnjc/71613.html