欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-02 12:17:23
代码如下: //页面加载完执行resizeimage()函数 $(document).ready(resizeimage()); function resizeima...

代码如下:


//页面加载完执行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);
}
});
})
}