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


Posted in Javascript onFebruary 21, 2014
<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是最大的高度。

Javascript 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 #Javascript
js document.write()使用介绍
Feb 21 #Javascript
jQuery写fadeTo示例代码
Feb 21 #Javascript
iframe父页面获取子页面参数的方法
Feb 21 #Javascript
表单序列化与jq中的serialize使用示例
Feb 21 #Javascript
常规表格多表头查询示例
Feb 21 #Javascript
Javascript中引用示例介绍
Feb 21 #Javascript
You might like
php数组中包含中文的排序方法
2014/06/03 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
JavaScript模块详解
2017/12/18 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
Python最基本的输入输出详解
2015/04/25 Python
python 写的一个爬虫程序源码
2016/02/28 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
Python工厂函数用法实例分析
2018/05/14 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
python梯度下降算法的实现
2020/02/24 Python
500行python代码实现飞机大战
2020/04/24 Python
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
材料员岗位职责范本
2015/04/11 职场文书
乒乓球比赛通知
2015/04/27 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏