指定区域的图片自动按比例缩小的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 相关文章推荐
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
js精度溢出解决方案
Dec 02 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 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实现多服务器共享SESSION数据的方法
2007/03/16 PHP
php英文单词统计器
2016/06/23 PHP
php利用header函数下载各种文件
2016/08/24 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
prototype class详解
2006/09/07 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
python 异常处理总结
2016/10/18 Python
python中异常捕获方法详解
2017/03/03 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
分享一个python的aes加密代码
2020/12/22 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
酒店总经理助理岗位职责
2014/02/01 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
调查研究项目计划书
2014/04/29 职场文书
导师工作推荐信范文
2014/05/17 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
社区安全温馨提示语
2015/07/14 职场文书