1

我遇到了一个问题，我似乎找不到问题的原因我对 JavaScript 和 jQuery 都有点陌生。

但是通过使用下面然后调整页面大小而不是简单地将图像的大小添加到图像 src 被重复添加，例如 responsive_Course_2_2_large_large_large_large_large_large.png 而不是 Responsive_Course_2_2_large.png

$(window).resize(function () {

    if ($(window).width() < 600) {

        if (ImageSize != 'stand') {
            $.each(imgIds, function (index, value) {
                Image_src = $('#' + value).attr('src');
                Image = Image_src.replace(/(\.[\w\d_]+)$/i, '$1');
                $('#' + value).attr('src', Image);
                $('#' + value).attr("ImageSize", 'stand');
            });
            $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back.png)');
        }
    }
    else if ($(window).width() > 960 && $(window).width() < 1280) {
        if (ImageSize != 'large') {
            $.each(imgIds, function (index, value) {
                Image_src = $('#' + value).attr('src');
                ImageLarge = Image_src.replace(/(\.[\w\d_]+)$/i, '_large$1');
                $('#' + value).attr('src', ImageLarge);
                $('#' + value).attr("ImageSize", 'large');
            });
            $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back_Large.png)');
        }
    }
   else {
        $.each(imgIds, function (index, value) {
            Image_src = $('#' + value).attr('src');
            Image = Image_src.replace(/(\.[\w\d_]+)$/i, '$1');
            $('#' + value).attr('src', Image);
            $('#' + value).attr("ImageSize", 'stand');
        });
        $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back.png)');
    }
});
4

3 回答 3

1

这是一种稍微替代的方法，但是您是否考虑过body在调整窗口大小时设置一个类，然后CSS为适当的大小设置多个类？我认为它会稍微整洁一些，并且也意味着JavaScriptandCSS不那么紧密地耦合在一起。这也意味着您可以使用大小来确定页面上元素的其他方面。

  1. 页面调整大小
  2. 宽度小于 600
    • 将正文类设置为small
  3. 宽度在 960 到 1280 之间
    • 将正文类设置为medium
  4. 宽度大于 1280
    • 将正文类设置为large

这将意味着在您的内部CSS您可以执行以下操作：

body.small #PageContentRow
{
    background-image: url('/my-image_small.png');
}
body.medium #PageContentRow
{
    background-image: url('/my-image_medium.png');
}
body.large #PageContentRow
{
    background-image: url('/my-image_large.png');
}
于 2012-06-08T14:02:59.127 回答
0

因为您不断将其添加到图像中。

在下面，您将删除文件扩展名并将 _large 添加到其中。

ImageLarge = Image_src.replace(/(\.[\w\d_]+)$/i, '_large$1');

您的正则表达式应考虑 _large

var str1 = "Responsive_Course_2_2.png";
var str2 = "Responsive_Course_2_2_large.png";

var re = /(_large)?(\.[\w\d_]+)$/i;
console.log( str1.replace(re, '_large$2') );
console.log( str2.replace(re, '_large$2') );
于 2012-06-08T13:57:10.660 回答
0

还有background-size css 属性。我不确定您要做什么，但听起来它可能适用。

#PageContentRow
{
  background-size: 100%; /* Scales background to #PageContentRow's width */
}
于 2012-06-08T14:23:13.433 回答