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更优雅的兼容
Aug 12 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
PHP自定义错误用法示例
2016/09/28 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
初始Nodejs
2014/11/08 NodeJs
JavaScript函数使用的基本教程
2015/06/04 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
js中less常用的方法小结
2017/08/09 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
Python 制作糗事百科爬虫实例
2016/09/22 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
python2与python3共存问题的解决方法
2018/09/18 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
python实现高斯投影正反算方式
2020/01/17 Python
Python实现手势识别
2020/10/21 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
学生会竞选演讲稿纪检部
2014/08/25 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
建筑工地文明标语
2014/10/09 职场文书
2014年纠风工作总结
2014/12/08 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
学生个人评语大全
2015/01/04 职场文书
Python实现聚类K-means算法详解
2022/07/15 Python