我正在尝试创建具有淡入淡出效果的背景幻灯片，我发现这个脚本可以完美地完成此操作:http://srobbin.com/jquery-plugins/backstretch/
我遇到的问题是它重新调整了图像的大小，我想禁用/删除它。
这是代码:
/*! Backstretch - v2.0.3 - 2012-11-30
* http://srobbin.com/jquery-plugins/backstretch/
* Copyright (c) 2012 Scott Robbin; Licensed MIT */ (function (e, t, n) {
"use strict";
e.fn.backstretch = function (r, s) {
return (r === n || r.length === 0) && e.error("No images were supplied for Backstretch"), e(t).scrollTop() === 0 && t.scrollTo(0, 0), this.each(function () {
var t = e(this),
n = t.data("backstretch");
n && (s = e.extend(n.options, s), n.destroy(!0)), n = new i(this, r, s), t.data("backstretch", n)
})
}, e.backstretch = function (t, n) {
return e("body").backstretch(t, n).data("backstretch")
}, e.expr[":"].backstretch = function (t) {
return e(t).data("backstretch") !== n
}, e.fn.backstretch.defaults = {
centeredX: !0,
centeredY: !0,
duration: 5e3,
fade: 0
};
var r = {
wrap: {
left: 0,
top: 0,
overflow: "hidden",
margin: 0,
padding: 0,
height: "100%",
width: "100%",
zIndex: -999999
},
img: {
position: "absolute",
display: "none",
margin: 0,
padding: 0,
border: "none",
width: "auto",
height: "auto",
maxWidth: "none",
zIndex: -999999
}
}, i = function (n, i, o) {
this.options = e.extend({}, e.fn.backstretch.defaults, o || {}), this.images = e.isArray(i) ? i : [i], e.each(this.images, function () {
e("<img />")[0].src = this
}), this.isBody = n === document.body, this.$container = e(n), this.$wrap = e('<div class="backstretch"></div>').css(r.wrap).appendTo(this.$container), this.$root = this.isBody ? s ? e(t) : e(document) : this.$container;
if (!this.isBody) {
var u = this.$container.css("position"),
a = this.$container.css("zIndex");
this.$container.css({
position: u === "static" ? "relative" : u,
zIndex: a === "auto" ? 0 : a,
background: "none"
}), this.$wrap.css({
zIndex: -999998
})
}
this.$wrap.css({
position: this.isBody && s ? "fixed" : "absolute"
}), this.index = 0, this.show(this.index), e(t).on("resize.backstretch", e.proxy(this.resize, this)).on("orientationchange.backstretch", e.proxy(function () {
this.isBody && t.pageYOffset === 0 && (t.scrollTo(0, 1), this.resize())
}, this))
};
i.prototype = {
resize: function () {
try {
var e = {
left: 0,
top: 0
}, n = this.isBody ? this.$root.width() : this.$root.innerWidth(),
r = n,
i = this.isBody ? t.innerHeight ? t.innerHeight : this.$root.height() : this.$root.innerHeight(),
s = r / this.$img.data("ratio"),
o;
s >= i ? (o = (s - i) / 2, this.options.centeredY && (e.top = "-" + o + "px")) : (s = i, r = s * this.$img.data("ratio"), o = (r - n) / 2, this.options.centeredX && (e.left = "-" + o + "px")), this.$wrap.css({
width: n,
height: i
}).find("img:not(.deleteable)").css({
width: r,
height: s
}).css(e)
} catch (u) {}
return this
},
show: function (t) {
if (Math.abs(t) > this.images.length - 1) return;
this.index = t;
var n = this,
i = n.$wrap.find("img").addClass("deleteable"),
s = e.Event("backstretch.show", {
relatedTarget: n.$container[0]
});
return clearInterval(n.interval), n.$img = e("<img />").css(r.img).bind("load", function (t) {
var r = this.width || e(t.target).width(),
o = this.height || e(t.target).height();
e(this).data("ratio", r / o), e(this).fadeIn(n.options.speed || n.options.fade, function () {
i.remove(), n.paused || n.cycle(), n.$container.trigger(s, n)
}), n.resize()
}).appendTo(n.$wrap), n.$img.attr("src", n.images[t]), n
},
next: function () {
return this.show(this.index < this.images.length - 1 ? this.index + 1 : 0)
},
prev: function () {
return this.show(this.index === 0 ? this.images.length - 1 : this.index - 1)
},
pause: function () {
return this.paused = !0, this
},
resume: function () {
return this.paused = !1, this.next(), this
},
cycle: function () {
return this.images.length > 1 && (clearInterval(this.interval), this.interval = setInterval(e.proxy(function () {
this.paused || this.next()
}, this), this.options.duration)), this
},
destroy: function (n) {
e(t).off("resize.backstretch orientationchange.backstretch"), clearInterval(this.interval), n || this.$wrap.remove(), this.$container.removeData("backstretch")
}
};
var s = function () {
var e = navigator.userAgent,
n = navigator.platform,
r = e.match(/AppleWebKit\/([0-9]+)/),
i = !! r && r[1],
s = e.match(/Fennec\/([0-9]+)/),
o = !! s && s[1],
u = e.match(/Opera Mobi\/([0-9]+)/),
a = !! u && u[1],
f = e.match(/MSIE ([0-9]+)/),
l = !! f && f[1];
return !((n.indexOf("iPhone") > -1 || n.indexOf("iPad") > -1 || n.indexOf("iPod") > -1) && i && i < 534 || t.operamini && {}.toString.call(t.operamini) === "[object OperaMini]" || u && a < 7458 || e.indexOf("Android") > -1 && i && i < 533 || o && o < 6 || "palmGetResource" in t && i && i < 534 || e.indexOf("MeeGo") > -1 && e.indexOf("NokiaBrowser/8.5.0") > -1 || l && l <= 6)
}()
})(jQuery, window);
我随机尝试重命名“resize”，但效果不太好。
最佳答案
我很难理解你的问题，但我仍然不确定我是否正确理解你的问题，无论如何，如果你希望每个图像的所有图像始终保持相同的大小，我的解决方案是添加 min width 和 min-height 值设置为图像的 css 样式，如果图像的样式为“img: { }”，那么:
img: {
position: "absolute",
display: "none",
margin: 0,
padding: 0,
border: "none",
width: "value",
height: "value",
min-width: "same value",
min-height: "same value",
maxWidth: "none",
zIndex: -999999
}
不确定，但这就是我所理解的解决方案。
关于javascript - jQuery 背景幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16645487/