web网页按比例显示图片实现原理及js代码

在动态站点上经常需要上传自己的图片,而这些图片的大小是未知的,在显示成缩略图的时候必须进行按比例的缩放才能美观地显示。以最近做的golf网站(http://www.changligolfsales.com)做例子。

该网站需要上传高尔夫产品图片,并以缩略图显示在列表上,站点服务器支持Asp,但不支持aspjpeg之类的生成缩略图组件,所以将上传的图片直接显示成缩略图,就需要按比例缩放了,前提是要获取图片的长宽,第一个想到的方法是在上传的时候通过ADODB.STREAM对象读取图片的长宽信息保存在数据库并在页面生成的时候读取出来计算比例。这个方法明显的缺点是显示每张图片都要在服务器读取数据并计算,消耗资源多了也加上了页面打开时延。
而第二个方法使用Javascript是将计算量转移到了客户端。

原理是在页面载入完成后(onload触发)在客户端使用Javascript读取每张图片的大小并进行缩放。


代码如下:

//将imageDest图片的大小按比例缩放,适合显示在宽W和高H的区域内
function ResizeImage(imageDest, W, H)
{
//显示框宽度W,高度H
var image = new Image();
image.src = imageDest.src;
if(image.width>0 && image.height>0)
{
//比较纵横比
if(image.width/image.height >= W/H)//相对显示框:宽>高
{
if(image.width > W) //宽度大于显示框宽度W,应压缩高度
{
imageDest.width = W;
imageDest.height = (image.height*W)/image.width;
}
else //宽度少于或等于显示框宽度W,图片完全显示
{
imageDest.width = image.width;
imageDest.height = image.height;
}
}
else//同理
{
if(image.height > H)
{
imageDest.height = H;
imageDest.width = (image.width*H)/image.height;
}
else
{
imageDest.width = image.width;
imageDest.height = image.height;
}
}
}
}

以上函数对图片进行缩放。
golf网站的每张缩略图的id都设为imgProductItem,如:<img src="<%= imgPath %>" name="imgProductItem" width="150" height="113" border="0" id="imgProductItem" />,里面的150x113就是显示框的最大尺寸,因为处理函数必须在onload完成时运行,所以这里必须设置一定的大小,要不整个页面在载入图片过程中出现排版错乱,到运行了RsizeAllImageById才恢复正常。
添加一个批量操作的函数:


代码如下:

//将页面内所有指定id的图片按比例缩放
function RsizeAllImageById(id, W, H)
{
var imgs = document.getElementsByTagName("img");
for(var i=0; i<imgs.length; i++)
{
if(imgs[i].id == id)
{
ResizeImage(imgs[i], W, H);
}
}
}

这样在页面的body添加


代码如下:

<body onload="javascript:init();">;在head区添加:

<mce:script language="javascript"><!--
function init()
{
RsizeAllImageById("imgProductItem", 150, 113);
}
// --></mce:script>

就可以将所有图片显示成缩略图了。

时间: 2013-08-06

jquery实现图片等比例缩放以及max-width在ie中不兼容解决

上次用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题 jQuery部分代码 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function(){ var maxWidth=$(".imgBox").width(); $("img").each(function(){

JS+css 图片自动缩放自适应大小

我加了css的限制: 复制代码 代码如下: div img {}{max-width:600px;width:600px;width:expression(document.body.clientWidth>600?"600px":"auto");overflow:hidden;} ◎ max-width:600px; 在IE7.FF等其他非IE浏览器下最大宽度为600px.但在IE6中无效. ◎ width:600px; 在所有浏览器中图片的大小为600px

关于图片按比例自适应缩放的js代码

如下图. 瞄了一下,居中可以用 text-align:center; 来实现.而按比例缩放,利用预设 <img /> 的 width .height 属性解决不了.因为用户图片可能是很长的,也可能是很宽的.在线上想了一下他们的关系,按条件来判断是这样的: 复制代码 代码如下: if(实际宽度 > 预览最大宽度) { 缩放宽度 = 预览最大宽度 } if(实际高度 > 预览最大高度) { 缩放高度 = 预览最大高度 } 但是这样会有问题,比如当宽度和高度都被缩放,如果缩放比较不同,图

JS 图片缩放效果代码

复制代码 代码如下: <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>onMouseWheel</TITLE> <SCRIPT> var count = 10; function Picture() { count = Counting(count); Resize

JavaScript等比例缩放图片控制超出范围的图片

js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,我们以稳定页面布局,本代码段就是完成了此功能,而且代码非常简洁,效果很好. 复制代码 代码如下: <html><head><title>等比例缩放图片</title><script>function DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽

js 图片缩放(按比例)控制代码

缩放代码: 复制代码 代码如下: 缩放代码: <script type="text/javascript"> //图片按比例缩放 var flag = false; function DrawImage(ImgD, iwidth, iheight) { //参数(图片,允许的宽度,允许的高度) var image = new Image(); image.src = ImgD.src; if (image.width > 0 && image.heig

js图片上传的封装代码

本文实例为大家分享了js图片上传的具体代码,供大家参考,具体内容如下 js封装的方法 function uploadImages(picker, url, callback) { var img_uploader = WebUploader.create({ auto: true, server: url, pick: picker, fileNumLimit: 1, fileSingleSizeLimit: 2097152, // 2M accept: { title: 'Images', e

js图片轮播效果实现代码

首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示:   1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过来的index值找到对应的li给

js图片卷帘门导航菜单特效代码分享

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于js实现图片卷帘门导航菜单特效代码,与以往的导航菜单相比,更具有创新性,不止是简单的向用户展示信息,而是更加丰富网站的整体内容. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/style.css" re

JS图片无缝、平滑滚动代码

非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

利用javascript解决图片缩放及其优化的代码

一个客户跟我联系说,刚给他做的网站,显示不正常,我顿时一紧张,这是我独立完成的第一个项目,于是赶紧打开他的网站看了看,没看出什么不正常来.我又问他怎么不正常,他说和交接项目时的效果不一样,晕,交接时要是不正常,项目肯定交接不了啊,干脆让他截个图过来.果然不正常,是他刚上传的一张图片把显示内容的窗口撑开了.查看代码,明明写好了max-width,怎么还会出现这种情况.突然发现他发来的图上,那个浏览器看着不顺眼,像是古老的而神圣的IE6!经过确认,果然是它,又是它!我真是疏忽,没给他在IE6下测试就

js 图片缩放特效代码

图片特效 .lightbox{width:300px;background:#FFFFFF;border:1px solid #ccc;line-height:25px; top:5%; left:5%;} .lightbox dt{background:#f4f4f4;} var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0]

原生js图片轮播效果实现代码

现在很多javascript的插件都可以实现图片轮播的功能,这篇文章,主要是通过这个domo来解析javascript图片轮播的原理. 老规矩,先上代码.至于代码中的图片,随便找三张即可,最核心的还是理解其思想. html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>滚动图</title> <link rel="sty

js图片加载效果实例代码(延迟加载+瀑布流加载)

主要做了两种图片加载的效果 一种是遇到页面图片比较多的时候,带读条效果的加载提示(为了验证正确加载,设置了1秒钟的加载间隔时间) 另外一种是根据滑块的位置进行图片的预加载,在用户不察觉的情况下,实现瀑布流的加载效果 一 延迟加载 主要思路: HTML的img标签中,将正确的地址存在data-src属性中,给所有图片设置一个转圈圈的loading图片作为background js中,依次读取每一个img,将data-src中的地址替换到src中,去掉background 每成功加载一张图片,进度条