ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery は、title_jquery の自動反転を設定します。
Jquery は、title_jquery の自動反転を設定します。
- WBOYオリジナル
- 2016-05-16 18:45:281120ブラウズ
つまり、ニュースがスクロールして表示された後、数秒間停止し、引き続き上に 2 スクロールして表示から消えます。同時に、次のニュースがスクロールして表示されます。今回は主に jquery を使用してこの機能を開発しました。多くの欠点があると思います。どなたでもコメントしていただけます。
最初にコードを貼り付けます。
コードをコピーします コードは次のとおりです:
$(document).ready( ) {
$('#news-feed').each(function() {
var $container = $(this);
$container.empty();
$.get( 'feed.xml ', function(data) {
$('rss item', data).each(function() {
var $link = $('' )
.attr('href', $('link', this).text())
.text($('title', this).text());
var $headline = $(' ').append($link);
var pubDate = new Date($('pubDate', this).text()); = pubDate.getMonth () 1;
var pubDay = pubDate.getFullyear();
var $publication = $('
.addClass('publication-date')
.text(pubMonth '/' pubDay '/' pubyear);
var $summary = $('
.text(pubMonth '/' pubDay '/' pubyear);
var $summary = $('
.addClass('summary')
.html($('description', this).text());
$('')
.addClass('headline')
.append($headline, $publication)
.appendTo($container);
var currentHeadline = 0, oldHeadline = 0;
var hiddenPosition = $container.height() 10;
$('div.headline').eq(currentHeadline).css('top', 0);
varHeadingCount = $('div .headline') .length;
varHeadingRotate = function() {
currentHeadline = (oldHeadline 1) %HeadingCount;
$('div.headline').eq(oldHeadline) ).animate(
{top: -hiddenPosition}, 'slow', function() {
$(this).css('top', hiddenPosition);
}); 'div.headline ').eq(currentHeadline).animate(
{top: 0}, 'slow', function() {
pause = setTimeout(headlineRotate, 4000);
}); 🎜>oldHeadline = currentHeadline;
pause = setTimeout(headlineRotate, 4000);
$container.hover(function() {
clearTimeout(pause);
}, function( ) {
pause = setTimeout(headlineRotate, 3000)
})
;/head>
なので、レコードの高さを 200px に設定する必要があり、それを超える場合は自動的に非表示になります。オーバーフロー=非表示。ここでは、データソースとして feed.xml を使用します。Jquery が XML ファイルを読み込んで読み込む方法は、上記の XML ファイルを読み込んでデータを取り出してアセンブルすることで非常に簡単です。表示する HTML を取得します。同時に、スクロール表示で 2 つの変数を設定する必要があります。1 つは現在表示されているタイトルを記録するためのもので、もう 1 つはタイトルを記録するためのものです。スクロールして見えなくなってしまったものです。現在のレコードを上部に表示します。位置は固定できないことに注意してください。最後に、レコードの表示を毎回自動的に呼び出す関数を記述するだけです。これらの操作を簡素化できる jquery 用のプラグインも多数あります。これらについては、今後さらに詳しく説明します。 jquery を学びたい場合は、jonathan Chaffer が書いた基本的な jquery チュートリアルを個人的にお勧めします。これは中国の他の人によって書かれていますが、内容はさまざまです。
.html($('description', this).text());
$('')
.addClass('headline')
.append($headline, $publication)
.appendTo($container);
var currentHeadline = 0, oldHeadline = 0;
var hiddenPosition = $container.height() 10;
$('div.headline').eq(currentHeadline).css('top', 0);
varHeadingCount = $('div .headline') .length;
varHeadingRotate = function() {
currentHeadline = (oldHeadline 1) %HeadingCount;
$('div.headline').eq(oldHeadline) ).animate(
{top: -hiddenPosition}, 'slow', function() {
$(this).css('top', hiddenPosition);
}); 'div.headline ').eq(currentHeadline).animate(
{top: 0}, 'slow', function() {
pause = setTimeout(headlineRotate, 4000);
}); 🎜>oldHeadline = currentHeadline;
pause = setTimeout(headlineRotate, 4000);
$container.hover(function() {
clearTimeout(pause);
}, function( ) {
pause = setTimeout(headlineRotate, 3000)
})
;/head>
なので、レコードの高さを 200px に設定する必要があり、それを超える場合は自動的に非表示になります。オーバーフロー=非表示。ここでは、データソースとして feed.xml を使用します。Jquery が XML ファイルを読み込んで読み込む方法は、上記の XML ファイルを読み込んでデータを取り出してアセンブルすることで非常に簡単です。表示する HTML を取得します。同時に、スクロール表示で 2 つの変数を設定する必要があります。1 つは現在表示されているタイトルを記録するためのもので、もう 1 つはタイトルを記録するためのものです。スクロールして見えなくなってしまったものです。現在のレコードを上部に表示します。位置は固定できないことに注意してください。最後に、レコードの表示を毎回自動的に呼び出す関数を記述するだけです。これらの操作を簡素化できる jquery 用のプラグインも多数あります。これらについては、今後さらに詳しく説明します。 jquery を学びたい場合は、jonathan Chaffer が書いた基本的な jquery チュートリアルを個人的にお勧めします。これは中国の他の人によって書かれていますが、内容はさまざまです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。