当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Jquery动态进行图片缩略的原理及实现

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

2019年01月20日  | 移动技术网IT编程  | 我要评论

代码如下:


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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网