Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 Jquery动态进行图片缩略的原理及实现

Jquery动态进行图片缩略的原理及实现

发布时间:2014-03-08   编辑:www.jquerycn.cn
图片缩略在某些情况下还是比较实用的,比如在做一些商品的预览图缩略等等,下面为大家介绍下具体的实现思路及代码,有需求的朋友可以参考下
复制代码 代码如下:

//页面加载完执行resizeImage()函数
$(document).ready(resizeImage());

function resizeImage(){
$(".pic a img").each(function(){
//加载图片至内存,完成后执行
$(this).load(function(){
//获得原始图片高宽
var imgWidth = $(this).width();
var imgHeight = $(this).height();
//获得图片所在Div高宽
var boxWidth=$('.pic').width();
var boxHeight=$('.pic').height();
//比较imgBox的长宽比与img的长宽比大小
if((boxWidth/boxHeight)>=(imgWidth/imgHeight))
{
//重新设置img的width和height
$(this).width((boxHeight*imgWidth)/imgHeight);
$(this).height(boxHeight);
//让图片居中显示
var margin=(boxWidth-$(this).width())/2;
$(this).css("margin-left",margin);
}
else
{
//重新设置img的width和height
$(this).width(boxWidth);
$(this).height((boxWidth*imgHeight)/imgWidth);
//让图片居中显示
var margin=(boxHeight-$(this).height())/2;
$(this).css("margin-top",margin);
}
});
})
}

您可能感兴趣的文章:
Jquery动态进行图片缩略的原理及实现
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Jquery 动态实现图片缩略的代码
jQuery动态改变图片显示大小(示例代码)
使用javascript中canvas实现拼图小游戏
php图片裁剪与缩略图示例
如何通过imagick让PHP生成PSD文件缩略图(实例)
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
移动端利用H5实现压缩图片上传的功能
js动态获取图片width与height 等比例缩放的代码

关键词: Jquery  图片缩略   
[关闭]