×

用jQuery动态进行图片缩略

作者:ceshi2018.01.26来源:Web前端之家浏览:9195评论:0
关键词:JQueryJS

用jQuery动态进行图片缩略,直接上代码:

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

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1488211200703.html

网友评论文明上网理性发言 已有0人参与

发表评论: