欢迎来到福编程网,本站提供各种互联网专业知识!

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

发布时间:2007-03-12 作者: 来源:原创
最近做一个图片的自动缩小效果,发现一直用的js,竟然在firefox下无法正常啊,导致页面变形.所以自己写了个兼容性一般的代码,大家可以来讨论下原来我用的是从pjblog上的复制代码代码如下://查找网页内宽度太大的图片进行缩放以及PNG纠正functionReImgSize(){for(
最近做一个图片的自动缩小效果,发现一直用的js,竟然在firefox下无法正常啊,导致页面变形.所以自己写了个兼容性一般的代码,大家可以来讨论下
原来我用的是从pjblog上的
复制代码 代码如下:
//查找网页内宽度太大的图片进行缩放以及PNG纠正
functionReImgSize(){
for(i=0;i{
if(document.all){
if(document.images[i].width>550)
{
document.images[i].width="550" //没有高,明显会让图片变形
try{
document.images[i].outerHTML=''+document.images[i].outerHTML+''
}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)){
//W3CDOM
returndocument.getElementById(objectId);
}
elseif(document.all&&document.all(objectId)){
//MSIE4DOM
returndocument.all(objectId);
}
elseif(document.layers&&document.layers[objectId]){
//NN4DOM..note:thiswon'tfindnestedlayers
returndocument.layers[objectId];
}
else{
returnfalse;
}
}
functiondxy_ReImgSize(){
varbox=$("dxy_content");
varimgall=box.getElementsByTagName("img")
for(i=0;i{
if(imgall[i].width>500)
{
varoWidth=imgall[i].width;
varoHeight=imgall[i].height;
imgall[i].width="500";
imgall[i].height=oHeight*500/oWidth;
}
}
}

可又发现,如果低浏览器,不支持getElementsByTagName,就没的玩了,好处是可以控制区域.
最后没办法了,就先弄个,暂时的解决办法
复制代码 代码如下:
functionReImgSize(){
for(i=0;i{
if(document.all){
if(document.images[i].width>500)
{
varoWidth=document.images[i].width;
varoHeight=document.images[i].height;
document.images[i].width="500";
document.images[i].height=oHeight*500/oWidth;
document.images[i].outerHTML=''+document.images[i].outerHTML+''
}
}
else{
if(document.images[i].width>500){
varoWidth=document.images[i].width;
varoHeight=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)}
}
}
}
}

注意我增加了
复制代码 代码如下:
varoWidth=document.images[i].width;
varoHeight=document.images[i].height;
document.images[i].width="500";
document.images[i].height=oHeight*500/oWidth;

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

相关推荐