指定区域的图片自动按比例缩小的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 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
javascript与CSS复习(二)
Jun 29 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
在node中如何使用 ES6
Apr 22 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
javascript String 对象
2008/04/25 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
详解python进行mp3格式判断
2016/12/23 Python
django定期执行任务(实例讲解)
2017/11/03 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
装饰活动策划方案
2014/02/11 职场文书
小学生读书笔记
2015/07/01 职场文书
欠条格式范本
2015/07/03 职场文书
暑期工社会实践报告
2015/07/13 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
Python序列化模块JSON与Pickle
2022/06/05 Python