js实现固定显示区域内自动缩放图片的方法


Posted in Javascript onJuly 18, 2015

本文实例讲述了js实现固定显示区域内自动缩放图片的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#img{ width:600px; height:400px; position:relative; overflow:hidden; background:#996699;}
</style>
</head>
<body>
<div id="img"><img src="dsds.JPG" onload="resize_img(this,600,400)" /></div>
</body>
</html>
<script type="text/javascript">
function resize_img(pic,w,h){
 var re_new_size=function(r){
 //根据比率重新计算宽度
  return {w:pic.width/r,h:pic.height/r};
  };
 var re_offset=function(n){
 //根据新的宽高度返回偏移量
  return {off_l:(n.w-w)*0.5,off_t:(n.h-h)*0.5};
  }; 
 var re_position=function(o,n){
 //重新定位图片
  pic.style.cssText="position:absolute;top:"+-o.off_t+"px;left:"+-o.off_l+"px;width:"+n.w+"px;height:"+n.h+"px;";
  }; 
 var execute=function(rate){
  var new_size=re_new_size(rate),
    offset_new=re_offset(new_size);
  re_position(offset_new,new_size);
  };
 var rate_of_w=pic.width/w,
   rate_of_h=pic.height/h,
   rate;
 if(rate_of_w>=1){
 //图片宽度大于显示区域宽度
    if(rate_of_h>=1){
    //且图片高度大于显示区域高度
    rate=Math.min(rate_of_w,rate_of_h);
    }else{
    //图片高度小于显示区域
     rate=pic.height/h;
     }
 }else{
 //图片宽度小于显示区域宽度
    if(rate_of_h>=1){
    //且图片高度大于显示区域高度
     rate=pic.width/w;
    }else{
    //图片高度小于显示区域高度
     rate=Math.min(rate_of_w,rate_of_h);
     }
   }  
 execute(rate);
 //执行入口  
 }
</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
JS实现鼠标移动拖尾
Dec 27 Javascript
javascript顺序加载图片的方法
Jul 18 #Javascript
javascript字符串循环匹配实例分析
Jul 17 #Javascript
动态加载jQuery的两种方法实例分析
Jul 17 #Javascript
javascript父子页面通讯实例详解
Jul 17 #Javascript
javascript实现的闭包简单实例
Jul 17 #Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 #Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 #Javascript
You might like
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
php at(@)符号的用法简介
2009/07/11 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
php实现中文转数字
2016/02/18 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
浅析vue数据绑定
2017/01/17 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python实现控制台中的进度条功能代码
2017/12/22 Python
python实现Floyd算法
2018/01/03 Python
python实现画圆功能
2018/01/25 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
大学生村官典型材料
2014/01/12 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
采购经理岗位职责
2014/02/16 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书