我无法让这个工作,请帮忙! 。一团糟。我想要做的是,使这个图像模糊,并在几秒钟内模糊一个新的,如果窗口大小大于定义的大小,它将使用更大的图像。此外,它需要检查窗口是否已重新调整大小,以便我可以随时更改图像。所以我需要这样的东西:
$(window).resize(function(){
change size
});
这是我遇到麻烦的主要代码:
$(document).ready(function() {
var index = 1;
function rotateImage()
{
$('.dp1').fadeOut('slow', function()
{
if($(window).width() > 1312 ) {
$('.dp1').css({'background-image' : 'url(../img/display_banner' + index + '.jpg)'});
}
else {
$('.dp1').css({'background-image' : 'url(../img/display_banner' + index + '_big.jpg)'});
}
$(this).fadeIn('slow', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
setInterval (rotateImage, 4000);
});
});
答案 0 :(得分:1)
首先,您只需要一个.ready()
方法。 :)
要解决您的问题,您可以利用.resize()
来计算窗口宽度。只需从包含宽度的变量开始,然后在调整大小时重新计算。例如:
$(document).ready(function () {
var index = 1,
width = $(window).width(); // SET THE WIDTH ON DOCUMENT READY
function rotateImage () {
//...
if(width > 1312){ // USE THE "width" variable here in this comparison
//...
}
//SET THE "width" variable on window resize
$(window).resize(function(){
width = $(this).width();
//... RESIZE OR CHANGE OUT IMAGES HERE...
});
});