使用jQuery在点击时交换身体背景图像，并在加载时随机化
使用jQuery在点击时交换身体背景图像，并在加载时随机化
提问于 2011-08-18 23:10:37
我有一个身体背景图片，它是由一个名为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()");
});任何想法，帮助，等将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-08-18 23:16:59
这些<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 + ')');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7109735
复制相关文章
相似问题
腾讯云开发者
