繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > [原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
- Javascript
- Javascript解决常见浏览器兼容问题的12种方法
- 用AJAX返回HTML片段中的JavaScript脚本
- javascript splice数组简单操作
- jQuery 数据缓存data(name, value)详解及实现
- javascript下动态this与动态绑定实例代码
- javascript forEach函数实现代码
- javascript bind绑定函数代码
- javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
- jQuery DOM操作小结与实例
- Extjs学习笔记之一 初识Extjs之MessageBox
- Extjs学习笔记之二 初识Extjs之Form
- Extjs学习笔记之三 extjs form更多的表单项
- Extjs学习笔记之四 工具栏和菜单
- EXT中xtype的含义分析
- Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
- jQuery DOM操作 基于命令改变页面
- 让多个输入框中的内容同时变化的js代码
- 判断iframe是否加载完成的完美方法
- IE iframe的onload方法分析小结
- javascript new一个对象的实质
Javascript 中的 [原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 125 ::
收藏到网摘: n/a
最近做一个图片的自动缩小效果,发现一直用的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.ruanchen.com 软晨学习网 原创,转载请写明出处
评论 (0) All
