Headlines」みないなお知らせ・インフォメーションを作りたかったのでjQueryで作成してみました。省スペース且つ動きがあるので効果的なインフォメーションだと思います。アップルのサイトはこちらトップページの中段くらいにあるやつです。{headline();}});サンプルダウンロード解説jQueryのスクリプト解説の前にcssの説明をします。今回は一行分のお知らせだけを表示するので、それ以外は表示されないようにします。hidden;}やり方は上記のようにして高さを30pxで固定し、overflow(はみ出した領域)をhidden(非表示)とします。以下のhtmlソースの場合、初期は「~お知らせ内容1~」だけが表示されます。id="news"><ul><li>~お知らせ内容1~</li><li>~お知らせ内容2~</li><li>~お知らせ内容3~</li></ul></div></body>つづいてスクリプトの説明です。関数を作成し、その中でsetTimeoutを実行します。setTimeoutを使うことで指定時間毎に処理を繰り返すことができます。今回は3000ミリ秒(3秒)ごとにお知らせの内容を切り替えます。3000);}});setTimeoutで処理する内容です。setTimeoutの処理事態が記載されている関数「headline」を実行します。headline();次に、liタグの内、一つ目以外は非表示にします。hidden;)ようにしているので必要ないのでは?と思うかもしれませんが、ここでわざわざ非表示にしているのはお知らせを切り替える時にフェードインのエフェクト効果を入れる為です。'none');次はエフェクトの処理とli要素の削除・複製・追加です。一つ目のliタグをフェードアウトします、今回はフェードアウトの早さを「normal」にしていますが、ここはお好みで調整して下さい。フェードアウトが終わったらコールバック関数で、二つ目のliタグをフェードインします。同時にフェードアウトした一つ目のliタグを複製し一番最後に追加します。最後にフェードアウトした一つ目のliタグを削除します。//一つ目のliタグを削除});ここまでで、Apple風インフォメーションの9割がたは完成です。あとは、ページの読み込み時に関数「headline」を実行すればOKです。お知らせが1つの時は動作がおかしくなりますでの条件文を使って、お知らせが1つ以上ある場合にのみ上記のエフェクトを実行するようにします。li").size();数が2以上ある場合は、関数「headline」を実行すると書くだけです。{headline();}以上でApple風インフォメーションを実装できます。コメントをキャンセルメールアドレスが公開されることはありません。