您的位置:首页 > Web前端 > JQuery

jquery图片尺寸调整插件图片垂直居中自适应容器

2015-03-19 14:10 405 查看
(function($) {
$.fn.extend({
resizeImg: function(opt, callback) {
var defaults = {
w: 200,
h: 150
},
opts = $.extend(defaults, opt);

//获取图片实际宽高,此方法摘自网络
var getImgWh = function(url, callback) {
var width, height, intervalId, check, div, img = new Image(),
body = document.body;
img.src = url;

//从缓存中读取
if (img.complete) {
return callback(img.width, img.height);
};

//通过占位提前获取图片头部数据
if (body) {
div = document.createElement('div');
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
div.appendChild(img)
body.appendChild(div);
width = img.offsetWidth;
height = img.offsetHeight;
check = function() {
if (img.offsetWidth !== width || img.offsetHeight !== height) {
clearInterval(intervalId);
callback(img.offsetWidth, img.clientHeight);
img.onload = null;
div.innerHTML = '';
div.parentNode.removeChild(div);
};
};
intervalId = setInterval(check, 150);
};
// 加载完毕后方式获取
img.onload = function() {
callback(img.width, img.height);
img.onload = img.onerror = null;
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};
};

this.each(function() {
var _this = this;
getImgWh(this.src, function(imgWidth, imgHeight) {
//计算图片最大宽度
if (imgWidth > opts["w"]) {
_this.width = opts["w"];
_this.height = imgHeight * (opts["w"] / imgWidth);
imgWidth = opts["w"];
imgHeight = _this.height;
}
//计算图片最大高度
if (imgHeight > opts["h"]) {
_this.height = opts["h"];
_this.width = imgWidth * (opts["h"] / imgHeight);
imgHeight = opts["h"];
imgWidth = _this.width;
}

//水平居中,垂直居中
$(_this).css({
"margin-top": (opts["h"] - imgHeight) / 2,
"margin-left": (opts["w"] - imgWidth) / 2
});

});

});
}
});
})(jQuery);


调用方法

$("ul li img").resizeImg({
w:190, //设置图片最大宽度
h:80 //设置图片最大高度
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: