指定区域的图片自动按比例缩小的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 ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
jquery实现页面加载效果
Feb 21 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
javascript中undefined的本质解析
Jul 31 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 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获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python基于Tkinter实现的记事本实例
2015/06/17 Python
实例解析Python中的__new__特殊方法
2016/06/02 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
销售团队激励口号
2014/06/06 职场文书
数学教师个人总结
2015/02/06 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android