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 相关文章推荐
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
使用express来代理服务的方法
Jun 21 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
javascript实现点击星星小游戏
2019/12/24 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
深入理解Javascript中的this关键字
2015/03/27 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
python 实现字符串下标的输出功能
2020/02/13 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
质检员的岗位职责
2013/11/15 职场文书
部队领导证婚词
2014/01/12 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android