js实现固定显示区域内自动缩放图片的方法
作者：qq123 发布时间：2024-04-16 09:51:35
标签：js,缩放,图片
本文实例讲述了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程序设计有所帮助。
0
投稿猜你喜欢
- 1:php地址 http://127.0.0.6/?c=json2:java 输出的结果是[{"i
- 如何远程读取数据库页面？见下：<％Set HttpObj = Server.CreateObject(&
前言本文大概内容：例如：随着ElementUI前后端交互的技术的更新，用户的的体验越来越好。本文主要针对用户在保持原页面结构，再添加另一个页- 看了不少朋友的个人网站，有一个小问题，似乎很多朋友都忽略了，那就是版权声明的写法。虽然那只是一小行字，不过作为设计师也好，作为个人的爱好也好
- 前言HTML 5如同一场革命，正在Web2.0后时代轰轰烈烈的进行着。HTML 5是什么，无须我在这里赘述了。对于HTML 5的革新，按我的
- 又是一杯奶茶~事情的经过是这样的：又是奶茶，行吧行吧。快点开工，争取李大伟回来之前搞定。李大伟说是6位数字密码那么我们可以利用python生
- filter(function, sequence)：对sequence中的item依次执行function(item)，将执行结果为Tru
- 对我当前工程进行全部测试需要花费不少时间。既然有 26 GB 空闲内存，为何不让其发挥余热呢? tmpfs 可以通过把文件系统保
- string是c#中的类 String是.net Framework的类 用string需要通过再次编译，所以直接用String速度会更快·
- 本文实例讲述了Python实现的IP端口扫描工具类。分享给大家供大家参考，具体如下：去年服务器老是被攻击，每次上线之后，上线的人急急忙忙下班
- 行向量方式1import numpy as npb=np.array([1,2,3]).reshape((1,-1))print(b,b.s
- Python jieba分词如何添加自定义词和去除不需要长尾词通过如下代码，读取一个txt的高频词汇：# 找到高频词汇 &nb
- 什么是跨域跨域是浏览器的专用概念，指js代码访问自己来源站点之外的站点。比如A站点网页中的js代码，请求了B站点的数据，就是跨域。A和B要想
- 今天我们来写一个有管理功能的留言板程序。所谓的管理功能，其实就是每条留言前有一个选择框，点中要删除的留言，或者点“删除所有留言”，就完成了批
- 小的时候大家应该都玩过万花尺，将笔尖放置万花尺内不停的转动，便可以画出一幅精致的线稿图，现在我们不用万花尺，我们通过Python也能绘制出万
- 很多时候学习是一种难者不会，会者不难的事情。下面的5个python技巧是性价比极高的知识点，一学就会，不难但是相当管用。使用交互模式使用py
- 有时候我们可能会把CSV中的数据导入到某个数据库的表中，比如做报表分析的时候。对于这个问题，我想一点也难不倒程序人员吧！但是要是SQL Se
- 本文实例讲述了python使用opencv实现马赛克效果。分享给大家供大家参考，具体如下：最近要实现opencv视频打马赛克，在网上找了一下
- 1、环境1、python 3.72、pyinstaller2、下载方式:2.1 python安装（略）2.2 安装pyinstaller打开
- js中没有foreach这个关键字，但是可以用var v in array来实现遍历。但是需要注意的是， 拿到的是key而不是value。看
