[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结


Posted in Javascript onMarch 12, 2007

最近做一个图片的自动缩小效果,发现一直用的js,竟然在firefox下无法正常啊,导致页面变形.所以自己写了个兼容性一般的代码,大家可以来讨论下
原来我用的是从pjblog上的

//查找网页内宽度太大的图片进行缩放以及PNG纠正 
 function ReImgSize(){ 
  for (i=0;i<document.images.length;i++) 
   { 
   if (document.all){ 
    if (document.images[i].width>550) 
     { 
       document.images[i].width="550"  //没有高,明显会让图片变形
       try{ 
           document.images[i].outerHTML='<a href="'+document.images[i].src+'" target="_blank" title="在新窗口打开图片">'+document.images[i].outerHTML+'</a>' 
           }catch(e){} 
       } 
   } 
  else{ 
    if (document.images[i].width>400) { 
//宽和高都没有,更是让firefox下图片撑大图片
      document.images[i].title="在新窗口打开图片" 
      document.images[i].style.cursor="pointer" 
      document.images[i].onclick=function(e){window.open(this.src)} 
    } 
  } 
  } 
 }

非常好用的代码可不足的地方就是firefox下大图会变形,而且无法控制区域的图片,如果想要的大图,也被变成小图了
我自己写了个,
function $(objectId) {  
     if(document.getElementById && document.getElementById(objectId)) {  
    // W3C DOM  
       return document.getElementById(objectId);  
     }   
     else if (document.all && document.all(objectId)) {  
    // MSIE 4 DOM  
       return document.all(objectId);  
     }   
     else if (document.layers && document.layers[objectId]) {  
    // NN 4 DOM.. note: this won't find nested layers  
       return document.layers[objectId];  
     }   
     else {  
       return false;  
    }  
}
function dxy_ReImgSize(){ 
var box=$("dxy_content"); 
var imgall=box.getElementsByTagName("img") 
  for (i=0;i<imgall.length;i++) 
   { 
    if (imgall[i].width>500) 
     { 
    var oWidth=imgall[i].width; 
    var oHeight=imgall[i].height; 
    imgall[i].width="500"; 
    imgall[i].height=oHeight*500/oWidth; 
       } 
    } 
}

可又发现,如果低浏览器,不支持getElementsByTagName,就没的玩了,好处是可以控制区域.
最后没办法了,就先弄个,暂时的解决办法
function ReImgSize(){ 
  for (i=0;i<document.images.length;i++) 
   { 
   if (document.all){ 
    if (document.images[i].width>500) 
     { 
       var oWidth=document.images[i].width; 
       var oHeight=document.images[i].height; 
       document.images[i].width="500"; 
       document.images[i].height=oHeight*500/oWidth; 
       document.images[i].outerHTML='<a href="'+document.images[i].src+'" target="_blank" title="在新窗口打开图片">'+document.images[i].outerHTML+'</a>' 
       } 
   } 
  else{ 
    if (document.images[i].width>500) { 
       var oWidth=document.images[i].width; 
       var oHeight=document.images[i].height; 
       document.images[i].width="500"; 
       document.images[i].height=oHeight*500/oWidth; 
      document.images[i].title="在新窗口打开图片"; 
      document.images[i].style.cursor="pointer" 
      document.images[i].onclick=function(e){window.open(this.src)} 
    } 
  } 
  } 
 }

注意我增加了
var oWidth=document.images[i].width;  
       var oHeight=document.images[i].height;  
       document.images[i].width="500";  
       document.images[i].height=oHeight*500/oWidth; 

如果大家发现了什么更好的方法,贴出来啊
3water.com 三水点靠木 原创,转载请写明出处
Javascript 相关文章推荐
jQuery操作select的实例代码
Jun 14 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
js实现密码强度检验
Jan 15 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
vuex与组件联合使用的方法
May 10 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 #Javascript
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 #Javascript
(function(){})()的用法与优点
Mar 11 #Javascript
可以文本显示的公告栏的js代码
Mar 11 #Javascript
简单三步,搞掂内存泄漏
Mar 10 #Javascript
如何简单地用YUI做JavaScript动画
Mar 10 #Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 #Javascript
You might like
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
php链表用法实例分析
2015/07/09 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
python的re正则表达式实例代码
2018/01/24 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
python创建子类的方法分析
2019/11/28 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
幼儿园教师请假制度
2014/01/16 职场文书
个人承诺书
2014/03/26 职场文书
家长通知书教师评语
2014/04/17 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
婚礼秀策划方案
2014/05/19 职场文书
新品发布会策划方案
2014/06/08 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
社区工作者个人总结
2015/02/28 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书