jQueryタイトル自動反転実装 code_jquery

つまり、ニュースがビューにスクロールした後、数秒間停止し、引き続き上に 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()); >var pubMonth = pubDate.getMonth() 1;
var pubDay = pubDate.getFullyear();
var $publication = $('

< ;/div> ')
.addClass('publication-date')
.text(pubMonth '/' pubDay '/' pubyear);

var $summary = $('< div>
$('< div>< /div>')
.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;
var 一時停止;

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() {
一時停止= setTimeout(headlineRotate , 4000);
oldHeadline =
};
pause = setTimeout(headlineRotate, 4000); () {
clearTimeout(pause);
}, function() {
pause = setTimeout(headlineRotate, 3000)
});
} );

最近のニュース

ニュース リリース

それを解決しましょう これらのコードを見てみましょう まず、一度に 1 つのニュース レコードのみを表示するため、高さを 1 つのレコードに設定する必要があります (ここでは 200px)。それを超える場合は、高さを設定します。 =hidden はオーバーフローを自動的に非表示にします。ここでは、データソースとして feed.xml を使用します。Jquery が XML ファイルを読み込んで読み込む方法は、上記の XML ファイルを読み込んでデータを取り出してアセンブルすることで非常に簡単です。表示する HTML を取得します。同時に、スクロール表示で 2 つの変数を設定する必要があります。1 つは現在表示されているタイトルを記録するためのもので、もう 1 つはタイトルを記録するためのものです。スクロールして見えなくなってしまったものです。現在のレコードを上部に表示します。位置は固定できないことに注意してください。最後に、レコードの表示を毎回自動的に呼び出す関数を記述するだけです。これらの操作を簡素化できる jquery 用のプラグインも多数あります。これらについては、今後さらに詳しく説明します。 jquery を学びたい場合は、jonathan Chaffer が書いた基本的な jquery チュートリアルを個人的にお勧めします。これは中国の他の人によって書かれていますが、内容はさまざまです。