指定区域的图片自动按比例缩小的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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
javascript js cookie的存储,获取和删除
Dec 29 Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
理解JavaScript原型链
Oct 25 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
Angular模版驱动表单的使用总结
May 05 Javascript
微信小程序支付前端源码
Aug 29 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
我的论坛源代码(一)
2006/10/09 PHP
php 什么是PEAR?(第二篇)
2009/03/19 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
网页图片延时加载的js代码
2010/04/22 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
Python实现微信好友的数据分析
2019/12/16 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
python 对xml解析的示例
2021/02/27 Python
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
物业管理应届生求职信
2013/10/28 职场文书
函授大专自我鉴定
2013/11/01 职场文书
大型营销活动计划书
2014/04/28 职场文书
干部理论学习心得体会
2016/01/21 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技