(已编辑:我终于放弃了使用这个插件并使用了https://github.com/karacas/imgLiquid,它更简单而且工作非常简单)谢谢大家的帮助!!)
我正在尝试使用jQuery jquery-image-scale 插件。
谁能帮我将以下空值更改为名为“abc”的 div 类?还是我必须提供脚本的其余部分?
(function ($) {
$.fn.imageScale = function (params) {
var _matched_elements = this;
params = $.extend({
/**
* CSS selector used to get the image container against which the
* image size will be calculated.
*
* Default to the image's immediate parent.
*/
parent_css_selector: null,
/**
* Set to 'fit' or 'fill'. When set to 'fit', the image will scale
* to fit inside it's parent container's bounds. When set to
* 'fill', the image will fill it's parent container's bounds.
*/
scale: 'fill',
/**
* Boolean. The image will automatically center itself if the
* scale parameter is set to 'fill'. Set to false to disable this
* feature.
*/
center: true,
/**
* Time in milliseconds. When set, images that are not already
* cached by the browser will load hidden, then fade in. 0 to
* disable.
*/
fade_duration: 0,
/**
* Boolean. Whether to rescale images when the browser is resized.
*/
rescale_after_resize: true
}, params);
parse_images(_matched_elements);
if (params.rescale_after_resize) {
$(window).resize(function () {
parse_images(_matched_elements, true);
});
}
function parse_images(images, skip_init) {
images.each(function () {
var image = $(this);
if (params.parent_css_selector) {
var parent = img.parents(params.parent_css_selector);
} else {
var parent = image.parent();
}
if (!skip_init) {
parent.css({
opacity: 0,
overflow: 'hidden'
});
}
if (parent.length) {
image.bind('load', function () {
scale_image(image, parent, params);
});
// Trigger load event for cache images.
var src = this.src;
// Webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
// Data uri bypasses webkit log warning (thx doug jones).
this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
this.src = src;
}
});
}
function scale_image(image, parent, params) {
image.removeAttr('width').removeAttr('height');
image.css({
'width': 'auto',
'height': 'auto'
});
// Account for ancestors that are hidden to ensure we're getting
// the correct sizes.
var ancestor = image.get(0),
hiddenAncestors = [];
while (ancestor && ancestor.tagName != 'BODY') {
if (ancestor.style.display == 'none') {
hiddenAncestors.push(ancestor);
ancestor.style.display = 'block';
}
ancestor = ancestor.parentNode;
}
var parent_width = parent.width(),
parent_height = parent.height(),
image_width = image.width(),
image_height = image.height();
resize_image();
if (params.center) {
reposition_image();
}
for (var i = 0; i < hiddenAncestors.length; i++) {
hiddenAncestors[i].style.display = 'none';
}
show_image();
function resize_image() {
if (parent_width / image_width > parent_height / image_height) {
if (params.scale == 'fit') {
image.css('height', parent_height);
} else {
image.css('width', parent_width);
}
} else {
if (params.scale == 'fit') {
image.css('width', parent_width);
} else {
image.css('height', parent_height);
}
}
}
function reposition_image() {
var new_width = image.width(),
new_height = image.height();
image.css({
'margin-left': 0,
'margin-top': 0
});
if (new_width > parent_width) {
image.css('margin-left', '-' + Math.floor((new_width - parent_width) / 2) + 'px');
}
if (new_height > parent_height) {
image.css('margin-top', '-' + Math.floor((new_height - parent_height) / 2) + 'px');
}
}
function show_image() {
if (params.fade_duration > 0 && !image.get(0).complete) {
parent.animate({
opacity: 1
}, params.fade_duration);
} else {
parent.css('opacity', 1);
}
}
}
return this;
}
})(jQuery);
我试过 parent_css_selector: '.abc'
,但没有用。
已编辑(我需要完成的是仅使用 div 类即“abc”应用效果)
html代码:
<script>
$('img').imageScale({
parent_selector: '.abc', // Defaults to the image's immediate parent.
scale: 'fill',
center: true,
fade_duration: 0, // Fading is disabled if set to 0.
rescale_after_resize: true
});
</script>
<div id="wrapper">
<div class="logo">
<img src="logo.jpg" alt="" />
<div class="abc">
<img src="123.jpg" alt="" />
</div>
</div>