Мне нужна помощь в реализации плагина jquery с вращающейся цитатой.
Вот код JQuery:
(function($) {
$.fn.quovolver = function(speed, delay) {
/* Sets default values */
if (!speed) speed = 500;
if (!delay) delay = 6000;
// If "delay" is less than 4 times the "speed", it will break the effect
// If that's the case, make "delay" exactly 4 times "speed"
var quaSpd = (speed*4);
if (quaSpd > (delay)) delay = quaSpd;
// Create the variables needed
var quote = $(this),
firstQuo = $(this).filter(':first'),
lastQuo = $(this).filter(':last'),
wrapElem = '<div id="quote_wrap"></div>';
// Wrap the quotes
$(this).wrapAll(wrapElem);
// Hide all the quotes, then show the first
$(this).hide();
$(firstQuo).show();
// Set the hight of the wrapper
$(this).parent().css({height: $(firstQuo).height()});
// Where the magic happens
setInterval(function(){
// Set required hight and element in variables for animation
if($(lastQuo).is(':visible')) {
var nextElem = $(firstQuo);
var wrapHeight = $(nextElem).height();
} else {
var nextElem = $(quote).filter(':visible').next();
var wrapHeight = $(nextElem).height();
}
// Fadeout the quote that is currently visible
$(quote).filter(':visible').fadeOut(speed);
// Set the wrapper to the hight of the next element, then fade that element in
setTimeout(function() {
$(quote).parent().animate({height: wrapHeight}, speed);
}, speed);
if($(lastQuo).is(':visible')) {
setTimeout(function() {
$(firstQuo).fadeIn(speed*2);
}, speed*2);
} else {
setTimeout(function() {
$(nextElem).fadeIn(speed);
}, speed*2);
}
}, delay);
};
})(jQuery);
Я сохранил этот код как файл JS на своем веб-сайте.
А вот и мой HTML:
<link rel="stylesheet" media="screen" type="text/css" href="../../style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.quovolver.js"></script>
<body>
<div>
I want my rotating quotes HERE
</div>
</body>
</html>
Мне сказали: "Вызовите сценарий в функции готовности документа с помощью этой строки кода: $(’element’).quovolver();"
У меня вопрос: где и как мне хранить цитаты и как мне вызвать этот плагин JQuery в пространстве, которое я отметил на странице html?
Спасибо за вашу помощь!!
1 ответ
Вот что я нашел в документации:
Javascript (jQuery)
// CASE : in an extern file
// When document is ready...
$(document).ready(function() {
// Call Quovolver on the '.quotes' object
$('.quotes').quovolver();
});
// CASE : in HTML's head
<script>
$(document).ready(function() {
// Call Quovolver on the '.quotes' object
$('.quotes').quovolver();
});
</script>
HTML
<div class="quotes">
<blockquote>
<p>“That which can be asserted without evidence, can be dismissed without evidence.”</p>
<p>— Christopher Hitchens (Quote 1)</p>
</blockquote>
<blockquote>
<p>“Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”</p>
<p>— Christopher Hitchens (Quote 2)</p>
</blockquote>
<blockquote>
<p>“Everybody does have a book in them, but in most cases that's where it should stay.”</p>
<p>— Christopher Hitchens (Quote 3)</p>
</blockquote>
<blockquote>
<p>“Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”</p>
<p>— Christopher Hitchens (Quote 4)</p>
</blockquote>
<blockquote>
<p>“Human decency is not derived from religion. It precedes it.”</p>
<p>— Christopher Hitchens (Quote 5)</p>
</blockquote>
<blockquote>
<p>“Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”</p>
<p>— Christopher Hitchens (Quote 6)</p>
</blockquote>
</div><!-- .quotes -->
Добавьте класс .quotes в свой div, заполните его, как в этом примере, и вызовите код jQuery при загрузке документа.
Похожие вопросы
Новые вопросы
jquery
jQuery — это библиотека JavaScript. Также рассмотрите возможность добавления тега JavaScript. jQuery — это популярная кросс-браузерная библиотека JavaScript, которая упрощает обход объектной модели документа (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться рассматриваемым кодом, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.
.quoteсвоим содержанием, следуя приведенному выше шаблону.$(document).ready(function() { // Call Quovolver on the '.quotes' object $('.quotes').quovolver(); });В моем заголовке html, в сохраненном файле JS или в новом файле?<script>, или в файле JS$(document).ready(), или в новом файле (все еще в пределах$(document).ready()), который вы включите в свойhead.