防止页面被撑破图片自动缩小代码

2009/09/22  |  9:00 下午分类:DEDECMS  |  标签:  |  5,373 views
5
6
7
8
9
本代码的功能是自动获取网页中超过一定尺寸的图片,并自动按比例缩小,
防止撑破网页请先定义一个ID,例<div id=article> 这里是文章正文  </div>
js只获取这个id里面的图片,不会对网页其他地方的图片进行干扰,
避免把广告也缩小了在页面底部插入代码,必须在 “<div id=article>  
 这里是文章正文  </div>” 后面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script type="text/javascript" >
 
//缩放图片到合适大小
function ResizeImages()
{
   var myimg,oldwidth,oldheight;
   var maxwidth=550;
   var maxheight=880
   var imgs = document.getElementById('article').getElementsByTagName('img');   //如果你定义的id不是article,请修改此处
 
   for(i=0;i<imgs .length;i++){
     myimg = imgs[i];
 
     if(myimg.width > myimg.height)
     {
         if(myimg.width > maxwidth)
         {
            oldwidth = myimg.width;
            myimg.height = myimg.height * (maxwidth/oldwidth);
            myimg.width = maxwidth;
         }
     }else{
         if(myimg.height > maxheight)
         {
            oldheight = myimg.height;
            myimg.width = myimg.width * (maxheight/oldheight);
            myimg.height = maxheight;
         }
     }
   }
}
//缩放图片到合适大小
ResizeImages();
</imgs></script>

也可将本代码保存成一个js文件,放在网页底部调用。
其中 ResizeImages(); 表示执行,缺少这段代码则程序不执行。

本文转自DEDECMS

1条评论 关于 “防止页面被撑破图片自动缩小代码”

  1. 小柒 发表于: 九月 24th, 2009 11:40 上午

    不错学习学习!

    回复


发表您的评论