使用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显示随机引号作为加载覆盖

回答

相关问题