指定区域的图片自动按比例缩小的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实战之品牌展示列表效果
Apr 10 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 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设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
用于table内容排序
2006/07/21 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
Python正则表达式的使用范例详解
2014/08/08 Python
python实现获取Ip归属地等信息
2016/08/27 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
使用python+whoosh实现全文检索
2019/12/09 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
建筑施工员岗位职责
2013/11/26 职场文书
职务任命书范本
2014/06/05 职场文书
求职意向书
2014/07/29 职场文书
2014年老干部工作总结
2014/11/21 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
Python学习之异常中的finally使用详解
2022/03/16 Python