指定区域的图片自动按比例缩小的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 相关文章推荐
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
Javascript玩转继承(二)
May 08 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 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
linux下为php添加curl扩展的方法
2011/07/29 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
Python如何快速实现分布式任务
2017/07/06 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python 实现两个npy档案合并
2020/07/01 Python
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
初中同学聚会感言
2014/02/11 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
老员工辞职信范文
2015/05/12 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python