指定区域的图片自动按比例缩小的js代码（防止页面被图片撑破）

代码如下:

<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，请修改此处

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

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

我们用的图片控制代码：



代码如下:

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)}
           }
           }
    }
 }

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

赞 (0)

相关推荐

  • JS等比例缩小图片尺寸的实例

    为了提升用户体验,网站用户在上传图片的时候,我们不能够让用户自己去处理图片以达到我们的要求. 而通常像淘宝上商品实物展示这样的页面,我们需要控制的主要是图片的宽度. 又考虑到html页面解析顺序可能导致的一些问题,决定通过定义一个简单的功能函数,然后在img元素中添加onload事件来调用的方式进行实现,代码如下: JS部分 复制代码 代码如下: <script type="text/javascript"> function changeImg(objImg) {    

  • 指定区域的图片自动按比例缩小的js代码（防止页面被图片撑破）

    复制代码 代码如下: <div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div><script type="text/javascript" >//缩放图片到合适大小function ResizeImages(){  

  • 图片自动缩小的js代码,用以防止图片撑破页面

    JS代码(随便放哪里): <script language="JavaScript">  <!--  var flag=false;  function DrawImage(ImgD){  var image=new Image();  image.src=http://www.jb51.net/htmldata/2006-01-08/ImgD.src;  if(image.width>0 && image.height>0){    fl

  • 又一个图片自动缩小的JS代码

    <script language="JavaScript">  <!--  var flag=false;  function DrawImage(ImgD){  var image=new Image();  image.src=ImgD.src;  if(image.width>0 && image.height>0){    flag=true;    if(image.width/image.height>= 180/110)

  • JS代码实现页面切换效果

    本文实例为大家分享了JS代码实现页面切换效果的具体代码,供大家参考,具体内容如下 HTML+CSS部分 添加所有页面,和上一页.具体页.下一页的按钮, 设置div样式,默认第一页显示,其他页隐藏. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .item { display: none; widt

  • js图片自动切换效果处理代码

    复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]="5.jpg"; arr[5

  • web网页按比例显示图片实现原理及js代码

    在动态站点上经常需要上传自己的图片,而这些图片的大小是未知的,在显示成缩略图的时候必须进行按比例的缩放才能美观地显示.以最近做的golf网站(http://www.changligolfsales.com)做例子. 该网站需要上传高尔夫产品图片,并以缩略图显示在列表上,站点服务器支持Asp,但不支持aspjpeg之类的生成缩略图组件,所以将上传的图片直接显示成缩略图,就需要按比例缩放了,前提是要获取图片的长宽,第一个想到的方法是在上传的时候通过ADODB.STREAM对象读取图片的长宽信息保存在

  • 图片自动保存到本地并利用aspjpeg为图片加水印

    <% '函数功能:远程图片自动保存到本地服务器,并利用aspjpeg为图片加上水印 '(注意:请先在目录下创建images目录,用来保存临时图片) '本程序需要在服务器上安装"aspjpeg组件"否则无法正常使用 '也可以只取'''''22222222'''''''以上的部分,这部分可以保存图片,第二部分是进行水印增加 '使用方法,请保存为saveimg.asp 'saveimg.asp?url=http://siyizhu.com/logo.gif 即可以取下图片啦,HOHO.

  • Javascript客户端将指定区域导出到Word、Excel的代码

    复制代码 代码如下: <table id = "PrintA" width="100%" border="1" cellspacing="0" cellpadding="0" bgcolor = "#61FF13"> <TR style="text-align : center;"> <TD>单元格A</TD> <

  • Android实现图片自动切换功能(实例代码详解)

    在Android中图片的自动切换不仅可以实现自动切换,而且还可以使用手动切换.而且一般在切换的时候,在图片下方还带有其他内容的切换,用来标记是第几个图片的切换. 这种效果在我们日常生活中很常见,例如某宝购物,一些商城都可以使用到,用户体验度极好,今天小编就通过实例代码给大家分享android 图片自动切换功能的实现. 实现效果如下: 具体的示例代码如下: 布局代码: <?xml version="1.0" encoding="utf-8"?> <S

  • 带左右箭头图片轮播的JS代码

    带左右箭头图片轮播的JS代码

    轮播图实现效果见下图,图片能自己轮播,点击左右按钮进行翻页轮播,鼠标悬停图片或者标题上,停止轮播: 效果图为: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19

随机推荐