指定区域的图片自动按比例缩小的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 相关文章推荐
JavaScript Archive Network 集合
May 12 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
原生js实现放大镜组件
Jan 22 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中创建并处理图象
2006/10/09 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
python中引用与复制用法实例分析
2015/06/04 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
Puppeteer使用示例详解
2019/06/20 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
Python实现验证码识别
2020/06/15 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
开业庆典策划方案
2014/02/18 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
道德模范事迹材料
2014/12/20 职场文书
公司人力资源管理制度
2015/08/05 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python