使用jQuery替换出身体背景图像点击和随机加载

Using jQuery to Swap Out Body Background Image on click and randomize on load

本文关键字：随机 加载 图像 背景 替换 jQuery 换出 使用      更新时间：2023-09-26

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

设计人员希望图像能够通过页面上的一系列缩略图交换出来，并且该图像在页面加载时从该系列图像中随机化。

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

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

然后这是现在的代码(在jQuery工具可滚动)

<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()");
        });

如有任何意见、帮助等，不胜感激

这些<img>指向全尺寸图像文件吗?我非常讨厌使用全尺寸图像并将其缩小到缩略图大小的网站。加载时间太长了。

如果它们实际上是缩略图大小的图像，你将不能直接使用该url作为你的背景url，因为你只是拉伸一个缩略图大小的图像来覆盖窗口，并得到一个可怕的像素混乱。

如果页面是动态生成的，你会想要创建一个JS数组，其中包含完整尺寸的图像url的url，这样当缩略图被点击时，你可以从该数组中获得完整尺寸的url。或者至少有一个标准化的命名约定，这样一个简单的字符串操作就可以让你把缩略图的url变成一个完整尺寸的图像url。

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

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 + ')');
});
相关文章：