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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
JS的深浅复制详细
Oct 16 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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
Python向excel中写入数据的方法
2019/05/05 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
为什么要使用servlet
2016/01/17 面试题
Ruby如何实现动态方法调用
2012/11/18 面试题
促销活动总结模板
2014/07/01 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
停电放假通知
2015/04/14 职场文书
中标通知书
2015/04/17 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python