脚本之家整合版,指定区域的图片自动按比例缩小的js代码

复制代码 代码如下:

复制代码 代码如下:

脚本之家整合篇,欢迎转载。

图片 1

<div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div>
<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,请修改此处

复制代码 代码如下:

意思就是控制指定区域的的图片大小,要不一些大点的广告图片也会变形。脚本之家用的图片控制代码:复制代码 代码如下:function controlImg{ var c=ele.getElementsByTagName; for(var i=0;i'+c[i].outerHTML+'' } else{ c[i].title="在新窗口打开图片"; c[i].onclick=function{window.open} } } }}

   for(i=0;i<imgs.length;i++){
     myimg = imgs[i];

function controlImg(ele,w,h){
var c=ele.getElementsByTagName("img");
for(var i=0;i<c.length;i++){
var w0=c[i].clientWidth,h0=c[i].clientHeight;
var t1=w0/w,t2=h0/h;
if(t1>1||t2>1){
c[i].width=Math.floor(w0/(t1>t2?t1:t2));
c[i].height=Math.floor(h0/(t1>t2?t1:t2));
if(document.all){
c[i].outerHTML='<a href="'+c[i].src+'" target="_blank" title="在新窗口打开图片">'+c[i].outerHTML+'</a>'
}
else{
c[i].title="在新窗口打开图片";
c[i].onclick=function(e){window.open(this.src)}
}
}
}
}
window.onload=function(){
controlImg(document.getElementById("content"),670,980);
}

ele就是指定的区域,w是最大的宽度,大于这个就会缩小。h是最大的高度。

     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();
</script>

以前就需要这样的代码,但因为具体的思路不是和很清楚,今天在blueidea看到的文章,特整理下。
指定区域内的,一般用于控制内容部分的图片,可通过controlImg(document.getElementById("content"),670,980); 中的content,下面是测试代码。

意思就是控制指定区域的的图片大小,要不一些大点的广告图片也会变形。

图片 2 下面是要控制的区域。

**脚本之家用的图片控制代码:

原图

**

图片 3

复制代码 代码如下:

  教程图层:   一 打开原图 复制一层   二 执行图层<新建调整图层<色相/饱和度 参数不讲解   三 执行图层<新建调整图层<曲线   四 去色 然后降低不透明度   五 执行图层<新建调整图层<亮度/对比度

function controlImg(ele,w,h){
  var c=ele.getElementsByTagName("img");
  for(var i=0;i<c.length;i++){
    var w0=c[i].clientWidth,h0=c[i].clientHeight;
    var t1=w0/w,t2=h0/h;
    if(t1>1||t2>1||w0>=600){
     c[i].width=Math.floor(w0/(t1>t2?t1:t2));
     c[i].height=Math.floor(h0/(t1>t2?t1:t2));
if(document.all){
          c[i].outerHTML='<a href="'+c[i].src+'" target="_blank" title="在新窗口查看图片">'+c[i].outerHTML+'</a>'
      }
       else{
          c[i].title="在新窗口打开图片";
          c[i].onclick=function(e){window.open(this.src)}
           }
           }
    }
 }

图片 4

ele就是指定的区域,w是最大的宽度,大于这个就会缩小。h是最大的高度。

这下面是不需要控制的区域,大家可以参考下。 原图

代码如下: div id=articleimg height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" //div script type="text/javascript" //缩放图片到合适大小...

图片 5

  教程图层:   一 打开原图 复制一层   二 执行图层<新建调整图层<色相/饱和度 参数不讲解   三 执行图层<新建调整图层<曲线   四 去色 然后降低不透明度   五 执行图层<新建调整图层<亮度/对比度

图片 6

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

下面是用css expression实现的方法会增加客户端的负荷,建议用js的
假设有一个id为test的div,如何控制其内的图片不会撑呢?
  如下定义CSS即可:

复制代码 代码如下:

  #test IMG{
  border:0;
  margin:0;
  padding:0;
  max-width:600px;
  width:expression(this.width>600?"600px":this.width);
  max-height:450px;
  height:expression(this.height>450?"450px":this.height);
  }

  如此定义后,其中的图片宽就不会超过600,高不超过450,并按原比例值缩小!

复制代码 代码如下: function controlImg(ele,w,h){ var c=ele.getElementsByTagName("img"); for(var i=0;ic.length;i++){ var w0=c[i].clien...

本文由澳门威斯尼人平台登录发布于服务器&运维,转载请注明出处:脚本之家整合版,指定区域的图片自动按比例缩小的js代码

相关阅读