使用jquery顯示隨機引號作爲加載覆蓋

我正在爲我的網站創建加載覆蓋。每次點擊一個內部鏈接時，我都會在幾秒鐘內顯示一段鼓舞人心的報價。使用jquery顯示隨機引號作爲加載覆蓋

研究這幾個小時後，我迄今發現：

1.隨機不同的報價頁面刷新？

https://forum.jquery.com/topic/how-can-i-show-a-different-quote-at-random-on-page-refresh

這是我要問的確切問題，但我不能在解決方案制定出這一討論

2.上顯示隨機引用文字的討論

jQuery random blockquote

這對我來說是一個很好的選擇，但我需要在加載/覆蓋效果上加幾秒鐘。

任何人都可以幫助我嗎？謝謝你們

- 更新 -

有了很多朋友的幫助下，這裏是最好的解決方案，我已經能夠想出：

HTML：

<body> 
<!-- Place Directly Under the Opening "body" Tag --> 
<div class="" id="preloader"> 
    <blockquote>Default Quote</blockquote> <cite>Default Cite</cite> 

</div> 
<script type="text/javascript"> 
    // Adds a "loading" Class to the Preloader 
    document.getElementById('preloader').className += 'loading'; 
</script> 
<p>Lorem ipsum ante in varius dui tortor senectus scelerisque vivamus posuere, aliquam odio rutrum cubilia rutrum taciti et fames vel ornare augue etiam justo.</p>

JS：

// Display Random Blockquotes and Cites 


// Create Quotes Array 
var quotes = []; 

// The List of Quotes! 
quotes[0] = "Quote One"; 
quotes[1] = "Quote Two"; 
quotes[2] = "Quote Three"; 
quotes[3] = "Quote Four"; 

// Assign the Variable "quote" with a Random Quotation from Above 

var quote = quotes[Math.floor(Math.random() * quotes.length)]; 

// Alter the Current (Default) Quote Text with a Random Quote 
$('#preloader blockquote').text(quote); 

// Create Cites Array 
var cites = []; 

// The List of Cites 
cites[0] = "- Cite One"; 
cites[1] = "- Cite Two"; 
cites[2] = "- Cite Three"; 
cites[3] = "- Cite Four"; 

// Assign the Variable "cite" with a Random Cite from Above 

var cite = cites[Math.floor(Math.random() * cites.length)]; 

// Alter the Current (Default) Cite Text with a Random Quote 
$('#preloader cite').text(cite); 



// All Code Inside Here Will Get Executed After 5 Seconds 
setTimeout(function() { 
$('#preloader').fadeOut(2500, function() { 
$('#preloader').removeClass('loading'); 
}); 
}, 2500);

CSS：

#preloader { 
background: #000; 
height: 100%; 
bottom: 0; 
display: none; 
left: 0; 
position: fixed; 
right: 0; 
top: 0; 
background-image: url(http://loadinggif.com/generated-image?imageId=9&bgColor=%23000000&fgColor=%23ffffff&transparentBg=0&download=0&random=0.4457789873704314); 
background-position: 50% 20%; 
background-repeat:no-repeat; 
z-index: 999; 
margin: 0; 
padding: 0; 
} 
#preloader.loading { 
/* Displays Preloader When "loading" Class Present */ 
display: block; 
} 
#preloader blockquote { 
color: #fff; 
display: block; 
font-size: 30px; 
margin: 0; 
text-align: center; 
border: none; 
margin: 15% 0 2% 0; 
padding: 0; 
} 
#preloader cite { 
color: #fff; 
display: block; 
font-size: 15px; 
text-align: center; 
border: none; 
margin: 0; 
padding: 0; 
}

- 問題 -

我現在的問題是隨機報價將隨機匹配舉。我怎麼能得到「報價一」與匹配「引用一」 ...等等。我還是希望他們隨機顯示如果可能的話

下面是一個例子的jsfiddle http://jsfiddle.net/erlenmasson/24pEZ/

來源

2014-04-01 erlenmasson

像這樣的事情？

// Display Random Blockquotes and Cites 


// Create Quotes Array 
var quotes = []; 

// The List of Quotes! 

quotes.push({"content": "Quote One", "cite": "- Cite One"}); 
quotes.push({"content": "Quote Two", "cite": "- Cite Two"}); 
quotes.push({"content": "Quote Three", "cite": "- Cite Three"}); 
quotes.push({"content": "Quote Four", "cite": "- Cite Four"}); 

var randomNumber = Math.floor(Math.random() * quotes.length); 

// Alter the Current (Default) Quote Text with a Random Quote 
$('#preloader blockquote').text(quotes[randomNumber]['content']); 

// Alter the Current (Default) Cite Text with a Random Quote 
$('#preloader cite').text(quotes[randomNumber]['cite']); 


// All Code Inside Here Will Get Executed After 5 Seconds 
setTimeout(function() { 
    $('#preloader').fadeOut(2500, function() { 
     $('#preloader').removeClass('loading'); 
    }); 
}, 2500);

http://jsfiddle.net/24pEZ/10/

來源

2014-04-07 09:59:24

使用jquery顯示隨機引號作爲加載覆蓋

回答

相關問題