指定区域的图片自动按比例缩小的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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
document.createElement()用法
Mar 13 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
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中读取照片exif信息的方法
2014/08/20 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
vue使用video.js进行视频播放功能
2019/07/18 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
Python抓取手机号归属地信息示例代码
2016/11/28 Python
python如何读写json数据
2018/03/21 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
python滑块验证码的破解实现
2019/11/10 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
Python学习之os模块及用法
2020/06/03 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
应聘编辑职位自荐信范文
2014/01/05 职场文书
自荐信写法介绍
2014/01/25 职场文书
商场促销活动方案
2014/02/08 职场文书
优秀教师个人总结
2015/02/11 职场文书
2016年春节问候语
2015/11/11 职场文书