宽度图片高度免费素材下载 jQuery

资源魔 45 0

正在前段工夫做的图片预加载插件上,再次进行扩大。增加了图片的高度以及宽度进行等比例缩放以及居中。
相干代码:
/*
* jQuery插件:
* 图片预加载
* 重置图片宽度,高度
* 图片程度,垂直居中
* Dev By CssRain.cn
*/
jQuery.fn.loadthumb = function(options) {
options = $.extend({
src : "",
imgId : "myImgs",
parentId : "CRviewer"
},options);
var _self = this;
_self.hide();
var img = new Image();
$(img).load(function(){
imgDem = {};
imgDem.w = img.width;
imgDem.h = img.height;
imgDem = $.imgResize({"w": $("#"+options.parentId).width() ,"h": $("#"+options.parentId).height()},{"w":imgDem.w,"h":imgDem.h});
var imgMargins = $.imgCenter({"w": $("#"+options.parentId).width() ,"h": $("#"+options.parentId).height()},{"w":imgDem.w,"h":imgDem.h});
$("#"+options.imgId).css({width:imgDem.w,height:imgDem.h,marginLeft:imgMargins.l,marginTop:imgMargins.t});
_self.attr("src", options.src);
_self.fadeIn("slow");
}).attr("src", options.src); //.atte("src",options.src)要放正在load前面,
return _self;
}
//重置图片宽度,高度插件 ( parentDem是父元素,imgDem是图片 )
jQuery.imgResize = function(parentDem,imgDem){
if(imgDem.w>0 && imgDem.h>0){
var rate = (parentDem.w/imgDem.w < parentDem.h/imgDem.h)?parentDem.w/imgDem.w:parentDem.h/imgDem.h;
//假如 指定高度/图片高度 小于 指定宽度/图片宽度 , 那末,咱们的比例数 取 指定高度/图片高度。
//假如 指定高度/图片高度 年夜于 指定宽度/图片宽度 , 那末,咱们的比例数 取 指定宽度/图片宽度。
if(rate <= 1){
imgDem.w = imgDem.w*rate; //图片新的宽度 = 宽度 * 比例数
imgDem.h = imgDem.h*rate;
}else{// 假如比例数年夜于1,则新的宽度等于之前的宽度。
imgDem.w = imgDem.w;
imgDem.h = imgDem.h;
}
}
return imgDem;
}
//使图片正在父元素内程度,垂直居中,( parentDem是父元素,imgDem是图片 )
jQuery.imgCenter = function(parentDem,imgDem){
var left = (parentDem.w - imgDem.w)*0.5;
var top = (parentDem.h - imgDem.h)*0.5;
return { "l": left , "t": top};
}

本篇文章起源于 cssrain.cn 原文链接://www.cssrain.cn/article.asp?id=1342

标签: jQuery 图片预加载

抱歉,评论功能暂时关闭!