js與自動(dòng)伸縮圖片 自動(dòng)縮小圖片的多瀏覽器兼容的方法總結(jié) 原創(chuàng)
原創(chuàng) 更新時(shí)間:2007年03月12日 00:00:00 原創(chuàng) 作者:
最近做一個(gè)圖片的自動(dòng)縮小效果,發(fā)現(xiàn)一直用的js,竟然在firefox下無法正常啊,導(dǎo)致頁面變形.所以自己寫了個(gè)兼容性一般的代碼,大家可以來討論下
原來我用的是從pjblog上的
//查找網(wǎng)頁內(nèi)寬度太大的圖片進(jìn)行縮放以及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下大圖會變形,而且無法控制區(qū)域的圖片,如果想要的大圖,也被變成小圖了
我自己寫了個(gè),
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;
}
}
}
可又發(fā)現(xiàn),如果低瀏覽器,不支持getElementsByTagName,就沒的玩了,好處是可以控制區(qū)域.
最后沒辦法了,就先弄個(gè),暫時(shí)的解決辦法
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;
如果大家發(fā)現(xiàn)了什么更好的方法,貼出來啊
chabaoo.cn 腳本之家 原創(chuàng),轉(zhuǎn)載請寫明出處
原來我用的是從pjblog上的
復(fù)制代碼 代碼如下:
//查找網(wǎng)頁內(nèi)寬度太大的圖片進(jìn)行縮放以及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下大圖會變形,而且無法控制區(qū)域的圖片,如果想要的大圖,也被變成小圖了
我自己寫了個(gè),
復(fù)制代碼 代碼如下:
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;
}
}
}
可又發(fā)現(xiàn),如果低瀏覽器,不支持getElementsByTagName,就沒的玩了,好處是可以控制區(qū)域.
最后沒辦法了,就先弄個(gè),暫時(shí)的解決辦法
復(fù)制代碼 代碼如下:
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)}
}
}
}
}
注意我增加了
復(fù)制代碼 代碼如下:
var oWidth=document.images[i].width;
var oHeight=document.images[i].height;
document.images[i].width="500";
document.images[i].height=oHeight*500/oWidth;
如果大家發(fā)現(xiàn)了什么更好的方法,貼出來啊
chabaoo.cn 腳本之家 原創(chuàng),轉(zhuǎn)載請寫明出處
您可能感興趣的文章:
- JS預(yù)覽圖像將本地圖片顯示到瀏覽器上
- 來自國外的一款Js圖片瀏覽效果
- javascript IE7 瀏覽器本地圖片預(yù)覽
- 來自ImageSee官方 JavaScript圖片瀏覽器
- 多瀏覽器兼容的qq圖片輪換效果javascript代碼
- javascript上傳圖片前預(yù)覽圖片兼容大多數(shù)瀏覽器
- 瀏覽器圖片選擇預(yù)覽、旋轉(zhuǎn)、批量上傳的JS代碼實(shí)現(xiàn)
- JavaScript 類似flash效果的立體圖片瀏覽器
- jb51站長推薦的用js實(shí)現(xiàn)的多瀏覽器支持的圖片輪換展示效果ie,firefox
- JavaScript仿百度圖片瀏覽效果
相關(guān)文章
ie8.0下顯示本地圖片的js實(shí)現(xiàn)代碼 img.src
ie8.0下顯示本地圖片的js實(shí)現(xiàn)代碼,IE8.0 顯示本地圖片 img.src=本地圖片路徑 是無效,只能通過div來完成2012-03-03JS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到縮略圖顯示大圖的圖片放大效果
一個(gè)網(wǎng)頁上用的圖片提示效果,當(dāng)把鼠標(biāo)移動(dòng)到圖片縮略圖的時(shí)候,會顯示圖片大圖,似乎在網(wǎng)上這是個(gè)很常見的效果,實(shí)現(xiàn)方法也比較多,有人用CSS,有人用JavaScript,有人用jQuery,總之,選擇自己習(xí)慣的方式去實(shí)現(xiàn),就是最棒的。2012-12-12JavaScript判斷圖片是否能夠加載,失敗則替換默認(rèn)圖片
JavaScript智能判斷圖片是否能夠正確加載,若加載失敗則用默認(rèn)圖片替換,這是個(gè)比較實(shí)用的功能,不少網(wǎng)站都可見到這種功能.2010-10-10javascript document.images實(shí)例
js document.images獲取頁面中的所以圖片并顯示出來2008-05-05SuperSlide2實(shí)現(xiàn)圖片滾動(dòng)特效
SuperSlide2,實(shí)現(xiàn)圖片滾動(dòng),感覺很強(qiáng)大,這里只是簡單的演示其中一種類型,想看更多類型的話,可以去http://www.superslide2.com 查看,2014-06-06