指定区域的图片自动按比例缩小的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实现分割提取页面所需内容
May 09 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
深入探讨前端框架react
Dec 09 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
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
PHP4实际应用经验篇(6)
2006/10/09 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
python脚本后台执行方式
2019/12/21 Python
python集合删除多种方法详解
2020/02/10 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
商务会议邀请函
2014/01/09 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书