Question

如何更改HTML页面的背景（图像/颜色），自动使用淡出/淡化效果和3~5个图像/颜色重复过来＆amp;过度使用jQuery？

Answer 1

我能想到的最简单的方法是构造一个数组，将颜色放入其中并使用另一个包含图像源的数组。我不相信这种设置会为你带来最好的结果，但也许它可以帮助你实现目标。我希望你带着一点点盐，并将你的背景应用于这个解决方案。

首先，在你的CSS文件中：

.color-bg {
  background-color: #eee;
}
.img-bg {
  background: url(myImage.img);
  // add some more properties to make it behave how you want
}

现在基于此样式的HTML必须是：

<!-- Put all your header stuff up here -->
<script src="js/background-changer.js"></script>
<body>
<p> Wow look at all this content!</p>
</body>

在我们的background-changer.js文件中：

$(document).ready(function() {
    var myColors = ["red","green","blue"]
    var myURLs = ["path/1/image.jpg","another/path/to/img.jpg"];
    for (color in myColors) {
        $('body').attr('class', 'color-bg').delay(6000).css(
                 'background-color', color);
    }
    for (img_url in myURLs) {
        $('body').attr('class', 'img-bg').delay(1000).css(
                 'background-image', 'url(img_url)'); 
    }
 });

这应该让你进行锅炉镀层，使其符合你的规格。

Answer 2

     $(function () {
       function bgtx() {
           $("body").css({
               "transition": "background 2500ms ease-out",
                   "background": "100% 100% #" 
                   + String(Array(7)).replace(/,/g, function () {
                   var g = ("271314020a9b8c7d54da816e5f403221abcde0");
                   return g.charAt(Math.floor(Math.random() * g.length))
               })
           }).animate({
               top: "0"
           }, 2500, function () {
               bgtx()
           })
       };
       $.when(bgtx())
     })

jsfiddle http://jsfiddle.net/guest271314/c7P4L/

Answer 3

您可以使用一个JQuery插件，例如，您可以在其中找到其中一些http://www.jquery4u.com/plugins/responsive-fullscreen-background-image-plugins/

如果不想要插件，则需要创建一个div（或其他）并将其与绝对位置放回页面中的其他元素。然后用js玩fadeIn / fadeOut里面的图像（也许添加到img标签属性data-bgcolor，其中颜色匹配）。

基本上是如何制作幻灯片。

HTML / jQuery实时背景颜色

3 个答案: