[原创]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 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 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
2006/10/09 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
js href的用法
2010/05/13 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
python logging通过json文件配置的步骤
2020/04/27 Python
Python爬取梨视频的示例
2021/01/29 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
公司部门司机岗位职责
2014/01/03 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
出国留学经济担保书
2014/04/01 职场文书
小小商店教学反思
2014/04/27 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
中标通知书
2015/04/17 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
python数字类型和占位符详情
2022/03/13 Python
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android