Question

我有一个身体背景图片被一个名为ezBigResize的插件“放置”，它基本上允许图像随浏览器窗口缩放。

设计师想要成像，但能够通过页面上的一系列缩略图换出，以及该图像在该系列图像的页面加载时随机化。

最初在这两个添加之前，我只是设置了这样的设置：

$(document).ready(function() {$("body").ezBgResize({img : "/lib/img/bkgr/mainBG.jpg"});});

然后这是现在的代码（在jQuery Tools中可滚动）

<div id="bkgrSelector">
    <div class="scrollNav">
        <a class="prev browse left"></a>
    </div>
    <div class="scrollable">   
        <div class="items">
            <img src="/lib/img/bkgr/selections/main-bg.jpg" width="77" height="44" />
            <img src="/lib/img/bkgr/selections/main-bg02.jpg" width="77" height="44" />
            <img src="/lib/img/bkgr/selections/main-bg03.jpg" width="77" height="44" />
        </div>
    </div>
    <div class="scrollNav">
        <a class="next browse right"></a>
    </div>
</div>

虽然允许这些在页面加载时随机化并通过href中的值交换图像，但我有点过头了。

我尝试过类似的东西，但它不起作用，显然是不完整的。此外，它根本没有解决随机化问题。

$('#bkgrSelector .items img[href]').click(function()
{
            $("body").css("background-image", "url()");
        });

任何想法，帮助等都将不胜感激。

Answer 1

那些<img>是否指向完整尺寸的图像文件？我绝对喜欢使用全尺寸图像并缩小缩略图大小的网站。加载时间是残酷的。

如果它们实际上是缩略图大小的图像，您将无法直接使用该网址作为背景网址，因为您只需要拉伸一个小的缩略图大小的图像来覆盖窗口并获得可怕的像素化的混乱。

如果页面是动态生成的，那么您需要创建一个包含完整大小的图片网址的JS数组，以便在单击缩略图时，您可以从该数组中获取完整大小的网址。或者至少有一个标准化的命名约定，所以简单的字符串操作可以让你将缩略图网址转换为一个完整的图像网址。

一旦你有了这个数组，从它随机选择是一件简单的事情：

var imgs = ['/url/for/img1.jpg', '/url/for/img2.jpg', etc....];

$(document).ready(function() {
   randomUrl = imgs[Math.round(Math.random() * (imgs.length - 1)) + 1];
   $("body").css("background-image", 'url(' + randomURL + ')');
});

使用jQuery在单击时交换身体背景图像并在加载时随机化

1 个答案: