0

好吧，我在网上看到了很多关于这个的问题，但似乎其中很多都在使用 PHP、ASP、JQUERY 和任何其他语言。对我来说，我只对 CSS 和 Java Script 有点熟悉，那是我只知道的语言。那么有人可以向我展示一些针对该问题的 CSS 和 Java Script 代码吗？

无论如何，我也对网站上的背景感兴趣，每次刷新都会改变！

提前致谢！

嘿，我找到了示例代码，它运行良好！

本论坛的致谢：http ://www.daniweb.com/web-development/web-design-html-and-css/threads/228324/load-different-background-image-when-user-refresh

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function changeImg(imgNumber)   {
var myImages = ["Background/Background.jpg", "Background/Background2.jpg", "Background/Background3.jpg", "Background/Background4.jpg", "Background/Background5", "Background/Background6", "Background/Background7"];
var imgShown = document.body.style.backgroundImage;
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;
</script>
<style type="text/css">
.bg {background-attachment:fixed; background-repeat: no-repeat; background-position:top right;}
</style>
</head>
<body class="bg">
<p>Some text</p>
<!-- put a lot text lines here to see that the background stays fixed. -->
<p>Some text</p>
</body>
</html>
4

2 回答 2

0

大量的解决方案：

将所有文件存储在一个文件夹中。

  1. 使用索引号索引数据库表中的图像。生成一个特定范围的随机数，并显示该随机数对应的图像

  2. 将文件夹中的所有图像从 (1 - n) 重命名。生成随机数并附加 /。

获得随机图像后，您可以轻松地使用 javascript 覆盖背景或任何其他 dom 组件，例如

document.getElementByTag('body').setAttribute('style','background-image:url('+<your image>+'));

你也可以用 jQuery 来简化它。

于 2012-11-03T14:28:51.403 回答
0

您可以使用 JQuery 轻松地做到这一点 - 只需为每个链接定义点击事件 -

$(function(){
    $("link1").click(function(){
        $("body").css({background-image:"url('link1_image.gif')"}); 
    });
});​

对于每次刷新时的随机图像加载，您可以直接调用 onload 函数并设置随机图像。

$(function(){        
    var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
    $('body').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
});​

希望它会奏效。谢谢。

于 2012-11-03T15:16:59.580 回答