HTML/jQuery的現場背景顏色

如何更改HTML頁面的背景（圖像/彩色），與淡出/淡入效果自動和3〜5張/顏色，並使用jQuery的不斷重複&？HTML/jQuery的現場背景顏色

2014-05-03 x1024

提示：http://api.jquery.com/animate/ – dualed

 $(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/

來源

2014-05-04 00:40:33 guest271314

那超級低效的隨機顏色生成器。 –

哇！我喜歡隨機的顏色生成器部分，非常惡毒！尤其是如何生成基本字符串... – dualed

我能想到的最簡單的方法是構建一個數組，把前來色入，並有一個包含源圖像的另一個數組。我不相信這種設置會給你帶來最好的結果，但也許它會幫助你到達那裏。我希望你能夠用一點鹽來解決這個問題。

首先，在你的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>

在我們的背景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)'); 
    } 
});

這應該讓你鍋爐鍍，所以它的行爲符合你的規格。

來源

2014-05-03 23:04:25 theWanderer4865

不工作，就比較遺憾的是背景changer.js文件 – x1024

的第8行的錯誤，我覺得挺草率。 – theWanderer4865

您可以使用一個jQuery插件，這裏例如，你可以找到一些他們的http://www.jquery4u.com/plugins/responsive-fullscreen-background-image-plugins/

如果不想要一個插件，你需要創建一個div（或其他），並用絕對位置把它放回去頁面中的其他元素。然後玩js來淡入淡出/淡入淡出內部圖像（也許添加到img標籤屬性data-bgcolor把顏色匹配）。

主要是如何建立一個幻燈片。

來源

2014-05-03 23:59:46 keypaul

HTML/jQuery的現場背景顏色

回答

相關問題