• ベストアンサー

appleのトップのニュースティッカーのようなエフェクト

http://www.apple.com/jp/ のニュースピッカーように徐々に現れて消えてトピックスが切り替わるような ライブラリやその使い方が紹介されているような サイトってないでしょうか。 マーキーのように右から左へ流れていくようなものなら 見つかるんですが、このタイプは探してみたんですがなかなか見つからずですいませんがよろしくお願いします。

  • AJAX
  • 回答数3
  • ありがとう数13
回答 全件
ベストアンサー
ほかで作ったもの。画像だけどなんとかなるでしょ！ <!DOCTYPE…
ニュースピッカー・・というか、ヘッドラインを表示してるところですよね。…
具体的にappleのサイトのどのら辺にその「ニュースピッカー」なるもの…

質問者が選んだベストアンサー

  • ベストアンサー
noname#84373
noname#84373
回答No.3

ほかで作ったもの。画像だけどなんとかなるでしょ！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Change Image</title> <style type="text/css"> #photo { width:640px; height:150px; border:1px red solid; margin:0px; padding:0px; background-color:#fff; } #photo img { border:0px none; } </style> <ul id="photo"> <li><a href="htp:/test/" target="_blank"><img src="./img/0.gif" alt="0.gif"></a></li> <li><a href="htp:/test/" target="_blank"><img src="./img/1.gif" alt="1.gif"></a></li> </ul> <script type="text/javascript"> //@cc_on function ChangeImage () { this.init.apply(this, arguments); } //初期化 ChangeImage.prototype.init = function (elementId) { var c, s, t; this.sotowaku = document.getElementById(elementId);//外枠 this.list = [];//ImageList this.no = 0;//LIの番号 this.timer = null;//タイマーID this.quit = null;//中止？ this.opacity = null;//透明度 s = this.sotowaku.style; s.overflow = 'hidden'; s.position = 'relative'; //外枠CSS c = 0; while (t = this.sotowaku.childNodes[ c++ ]) { //子LIのみリストに追加 if ( t.nodeType == 1 && t.nodeName == 'LI' ) { if (c != 1) t.style.visibility = 'hidden'; this.list.push( { 'LI': t, 'IMG': this.setDef(t.getElementsByTagName('img')[0], c==1) } );//最初の画像以外透明 } } return; } //imgの初期値設定 ChangeImage.prototype.setDef = function (e, f) { var s = e.style; s.top = '0px'; s.left = '0px'; s.width = this.sotowaku.offsetWidth + 'px'; s.height = this.sotowaku.offsetHeight + 'px'; s.position = 'absolute'; if (!f) s./*@if(1) filter = 'alpha(opacity=0)' @else@*/ opacity = 0/*@end@*/; return e; } //imageの追加 ChangeImage.prototype.addImage = function (image, url) { var li = document.createElement('li'); var a; var img = document.createElement('img'); img.src = img.alt = image; this.setDef(img, this.list.length == 0); if (url == undefined) { li.appendChild(img); } else { a = document.createElement('a'); a.href = url; a.appendChild(img); li.appendChild( a ); } this.list.push( {'LI': this.sotowaku.appendChild(li), 'IMG': img } ); return; } //タイミングの設定 表示時間,消去時間,ステップ(%) // default [5,1,1] ChangeImage.prototype.start = function (atime, dtime, step) { this.atime = atime || 5000; this.step = (step == undefined || step < 1) ? 1: step; this.wait = Math.floor((dtime || 1000) / (100 / this.step)); this.loop0(); return; } ChangeImage.prototype.loop0 = function () { this.setOpacity(100); this.step *= -1; if (!this.quit) setTimeout( (function (cb_) { return function () { cb_.loop1(); };})(this), this.atime); } ChangeImage.prototype.loop1 = function () { this.timer = setInterval( (function (cb_) { return function () { cb_.changeOpacity(); };})(this), this.wait); } //透明度と対象物の前面化 ChangeImage.prototype.setOpacity = function (op, z, v) { var t = this.list[ this.no ]; t.IMG.style./*@if(1) filter = 'alpha(opacity='+ op + ')'; @else@*/ opacity = op / 100 /*@end@*/; this.opacity = op; if(z != undefined) t.LI.style.zIndex = z; if(v != undefined) t.LI.style.visibility = ['hidden','visible'][z]; } //透明度の設定 ChangeImage.prototype.changeOpacity = function () { var n = this.opacity + this.step; if (n < 0) { this.setOpacity(0, 0, 0); this.no = ++this.no % this.list.length; this.setOpacity(0, 1, 1); this.step *= -1; } else if (100 < n) { clearInterval(this.timer); this.loop0(); } else { this.setOpacity(n); } return; } var p = new ChangeImage('photo'); p.start(2000,1000,2); </script>

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • Seravy
  • ベストアンサー率47% (118/249)
回答No.2

ニュースピッカー・・というか、ヘッドラインを表示してるところですよね。ピッカーというよりティッカーです。w 多分こういった機能をひとまとめにしたライブラリーは無いと思いますので、必要な機能を考えてそれぞれで組むと良いと思います。 アップルのサイトの場合、 ・ニュースのリスト（RSSのようですが）をAjaxで読み込む ・表示するブロックの文字を入れ替え、透明度を変化させながら表示 ・徐々に消え、完全に消えたところで文字を入れ替え表示 の繰り返しです。 この場合、Ajaxで読み込むスクリプトと透明度を変化（＋アニメート）させるスクリプトが必要になります。 で、この二つの機能を提供してくれるJavaScriptフレームワークはいろいろあるんですが、 Prototype.js - www.prototypejs.org/ jQuery.js - jquery.com/ Mootools - mootools.net/ とかとかですね。 組み合わせて使うので、取ってきた情報を整形したり、次へ進む部分とかは自分で作らないといけません。

全文を見る
すると、全ての回答が全文表示されます。
  • KI401
  • ベストアンサー率53% (44/82)
回答No.1

具体的にappleのサイトのどのら辺にその「ニュースピッカー」なるものはあるの？ 軽く探したがそれらしいものがみつからなかった。現れて消えてしてるようなものなんてどこに…？？ で、この手のライブラリならば、"Ext JS"とか"jQuery"が有名どころ。 所謂Ajaxというやつなので、"Ajax UI"なんかでググればそれらしいライブラリはいくつか見つかると思う。 ただライブラリである以上、それらを利用するためには自分でJavaScriptコードを書くことになる。 まぁだからこそ解説サイトの類を御所望なのだろうが… 適当にググって出てきたやつ。 　http://www.atmarkit.co.jp/fwcr/rensai/ajaxrecipe03/ajaxrecipe03_1.html 例えばjQueryならこんなEffectが用意されている。 　http://semooh.jp/jquery/api/effects/ あるいはJavaScript以外でも、ページ全体をフラッシュにしてしまえば、 かなりページのアクティブ度を上げることができる。それも一つの手段だろう。 # 無駄に重いし、あまりそういうサイトは好きではないがf(- -; ## というか、ページの一部にフラッシュ埋め込むだけでもいけるのかな。作ったことないしワカラン 参考になればと。では

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. AJAX

関連するQ&A

  • アップルの「最新ニュース」の様な仕組み

    アップルの「最新ニュース」の様な仕組み を個人のサイトに使いたいのですが、どのようにすれば可能でしょうか？ 素人で詳しい事は書けませんが、良い情報があれば教えていただければと思います。 アップル http://www.apple.com/jp/startpage/

  • appleのHPが、、、

    今日のappleのサイト何か変じゃないですか？ topページ apple.com/jp に行こうとすると http://a1410.g.akamai.net/7/1410/1437/20040323/ www.apple.com/jpred/に飛んでしまうのは appleのサイドのサーバーがおかしいのでしょうか？ それとも自分のpcがおかしいのでしょうか。

    • ベストアンサー
    • Mac
  • apple idを忘れました

    apple idを忘れました 登録したメールアドレスはちゃんと把握していたので https://iforgot.apple.com/appleid?language=JP-JA&returnURL=https://appleid.apple.com/cgi-bin/WebObjects/MyAppleId.woa&app_id=93&app_type=ext これを使って、apple idを調べようとしたのですが どうしてもidを知ることができません 忘れた場合の対処としてこれをやったらいいっていろんなところに書いてあるのですが どうやったら忘れてしまったidをしることができるのでしょうか？

  • MSNトップからニュースのページへ行けません

    MSNトップページ http://jp.msn.com/ から、「ニュース、海外、経済、IT、・・・」のタブのうち 「ニュース」 のみリンクを開けません。 かつ、その下の各ニュース項目をクリックしても、 以下のメッセージになります。 ---------------------------------------------- Web サイトによってこのページの表示を拒否されました HTTP 403 可能性のある原因: •この Web サイトを表示するにはログインが必要です。 ---------------------------------------------- その他のタブや項目は普通に出ます。 どなたか原因を教えていただけるとありがたいです。 最近特に変わった設定変更などはしていません。

  • ニュースを面白く紹介しているサイト

    ニュースを面白く紹介しているサイトを探しています。YahooやGoogleなどのニュースもいいのですが、少し固い、形式ばった様な感じがします。もっと面白く読めるようなニュースを紹介しているサイトをご存知でしたら教えてください。 例えば、下記のサイトも面白く読めるニュースサイトだなぁと感じています。 http://wiredvision.jp/

  • FLASHでティッカーを作りたい

    FLASH5もしくはMXでニュースティッカーを作りたいと思います。 ＴＢＳ(FLASHNEWS)　http://www.tbs.co.jp/ のように外部テキストを読み込み、右から左へ流して一時止め、数秒後にまた流れ出すという風にしたいと思っています。 あらゆるWebや本を探しましたが、私の思うようなサンプルが無く、困っています。 参照にして、それらしい事が載っていたWeb・本 ◆C-TICKER ◆FLASH&インターフェイスデザインのネタ帳(MDN) ◆FLASH-FACTORY(SOFTBANK) 唯一↓にFlashティッカーのスレッドがありましたが、アクションスクリプトはいかんせん初心者なもので、難しすぎて分かりませんでした。（複雑に組み合わせていない単純なアクションスクリプトや解説があるものは分かります。） flashFAQ.org http://flashfaq.org/modules/newbb/viewtopic.php?viewmode=thread&order=ASC&topic_id=160&forum=1 どなたか教えて頂けないでしょうか？ 環境は以下の通りです。 ・Flash5 ・Windows98 2nd ・FlashPlayer6.079.0

    • 締切済み
    • CSS
  • Appleからのメルマガを再開するには？

    Appleからのメルマガを、以前配信停止手続きしたようです。 次に新iPadが発売されたら購入したいので、メルマガを再開したいと思います。 Apple公式ホームページを探したところ、探し方が悪いのか、 http://store.apple.com/jp/ の下の方の「Apple Store購入特典」の右の「ストアの最新情報を受け取る」しか見つけられませんでした。 これしかないのでしょうか？ Appleからのメルマガを再開する方法を教えてください。

    • 締切済み
    • Mac
  • このようなニュースを紹介しているサイトありませんか？

    http://wiredvision.jp/ 上の「wiredvision」というニュースサイトなんですが、新聞やyhaooやgoogleで取り上げられるニュースとは違って、私たちの知らない世界やニュースを紹介しています。とても面白いので毎日見ているのですが、似たようなニュースサイトを探しています。 もし、似たようなニュースサイトをご存知でしたら教えてください。

  • appleのイベントの告知から開催の期間が短い

    appleのイベントが告知されたというニュースが８月２９日か３０日頃に出ました。 そして、イベントの開催が９月７日ということです。 http://jp.sputniknews.com/science/20160830/2707366.html http://iphone-mania.jp/news-131203/ この期間設定をどう思いますか？（８日後の予定がとれない人も出るんじゃないかと思うと、短い気がします。） これは盛り上げるための期間設定としては、どうですか？適切ですか？

  • Mac proの購入を考えているのですが、appleのサイトには3種類

    Mac proの購入を考えているのですが、appleのサイトには3種類グレードがあるようです。 この4,8,12coreの3種類の違いはスペックの違いだけでしょうか？ 例えば、4coreを購入後に徐々に性能をあげていき、最終的には12coreと同じものを作ってしまうこともできるのでしょうか。 ■参考url http://store.apple.com/jp/browse/home/shop_mac/family/mac_pro?afid=p219%7CGOJP&cid=AOS-JP-KWG-C-MacRelated-MacPro

    • ベストアンサー
    • Mac

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する