指定区域的图片自动按比例缩小的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数组对象赋值用法实例
Aug 04 Javascript
js自定义回调函数
Dec 13 Javascript
Uploadify上传文件方法
Mar 16 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
Angular利用trackBy提升性能的方法
Jan 26 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 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
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
Python网络编程详解
2017/10/31 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
华为c/c++笔试题
2016/01/25 面试题
学雷锋演讲稿
2014/03/04 职场文书
团日活动总结书格式
2014/05/08 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
2015年财政局工作总结
2015/05/21 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书