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

最近做一个图片的自动缩小效果,发现一直用的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; 

如果大家发现了什么更好的方法,贴出来啊
www.jb51.net 原创,转载请写明出处

时间: 2024-10-23 06:59:09

js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结[原创]_图象特效的相关文章

js循环输出图片,不足的要补0[原创]_图象特效

我想把001.gif~285.gif显示在网页上.JS如果实现? HTML 是这样写 <img src=001.gif> <img src=002.gif> ... <img src=010.gif>  <img src=011.gif>  ... <img src=285.gif> 解决方法: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

来自ImageSee官方 JavaScript图片浏览器[原创]_图象特效

使用方法: 访问"imagesee.htm的网址+?pic=图片的网址&page=该图片相关网页的网址" 即可,其中page参数可以忽略. 关于ImageSee: ImageSee是开放源代码的网页图片浏览器,由JavaScript写成,是一个完全静态网页.同时支持IE Firefox Opera浏览器.  透过ImageSee,您可以方便的对网上的高清图片(大图片)进行浏览,具备常规的图片浏览所需要的全部主要功能:放大缩小.缩略图.图片鼠标拖动. 更多特色: 完全免费开放使用

比较方便的onMouseWheel缩放图片效果[原创]_图象特效

鼠标滑轮滚动查看效果,Author:reterry(dxy) www.jb51.net欢迎转载,转载时请写明出处.按住ctrl键然后鼠标从图片上移开,图片可恢复原始大小

图片分页查看[原创]_图象特效

复制代码 代码如下: <table height="120" border="0" align="center" cellpadding="5" cellspacing="0">           <script language="javascript" type="text/javascript"> function int(I,k) {

js事件驱动机制 浏览器兼容处理方法_javascript技巧

3.1. 事件是如何产生的 * 第一种情况,用户对网页做了某些操作,比如,点击了一个按钮,产生点击事件. 第二种情况,用户没有对网页做操作,也可能产生事件,比如浏览器已经将整个页面加载完毕,会产生加载完成事件.当事件产生以后,浏览器会查找产生事件的节点有没有绑订相应的事件处理代码.如果有,则调用该代码来处理.如果没有,会继续向上查找父节点,有没有对应的事件处理代码(事件冒泡). 3.2. 绑订事件处理代码 ** 1) 绑订事件处理代码到html标记乊上 比如: <a id="a1"

图片自动缩小 点击放大_图象特效

如果不支持网页对话框就再新窗口打开 目的:    图片自动缩小 点击放大 输入:    无 返回:    无 function $(obj){ return document.getElementById(obj); } function ResizeImage(objImage,maxWidth) { try{   if(maxWidth>0){    var objImg = $(objImage);    if(objImg.width()>maxWidth){     objImg.w

js实现图片放大缩小功能后进行复杂排序的方法_jquery

这是一个基于jquery的图片效果,它的作用是:当图片点击变大(变小)时,其它图片按照一定的规则进行排序运动. 首先来看下最终的效果图: 有人可能看到这个会觉得,这有什么难的,这么简单的事,楼主是不是太小提大作了?当你真正去尝试时,你才知道到底有什么难点.  首先,我们来讲下需求: 1.图片分为大小和小图,大图占四个小图的位置, 2.点击图片放大缩小, 重新排列顺序, 3. 当点击偶数列(2,4)时,它前面的那项将向提出来向后面排列 4.第一个项不能动,点第二个是将占第三四的位置,从后面取第一个

JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码_图象特效

属性 speed :设置图片切换的速度 width:组件的宽度 height:组件的高度 cellStructures:可设置效果矩阵的行列例如{row:8,col:8}注意,这个行列要和效果矩阵switchTable的行列对应 方法 init():初始化 addswitchTable(switchTable):添加效果矩阵 add(url):添加图片 addswitchMethod(func,type):添加切换方法(例如淡出,滑出),现在功能未完整,type只能填"show"一个值

一段实现页面上的图片延时加载的js代码_图象特效

相关地址:http://list.taobao.com/browse/30-50029375/n-1----------------------0---------yes-------g,ge3denzxhazdumzsgy3tsnzq-----------------------42-grid-commend-0-all-50029375.htm?TBG=14153.14.7&ssid=r18-s18 http://shop.qq.com/shopList.html 大家如果使用firebug