ベストアンサー

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

2009/03/07 15:37

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

tarotaro77
お礼率0% (0/4)

AJAX
回答数3
ありがとう数13

みんなの回答 （3）
専門家の回答

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

ベストアンサー

noname#84373

2009/03/12 18:52 回答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)

2009/03/11 17:26 回答No.2

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

KI401
ベストアンサー率53% (44/82)

2009/03/08 01:55 回答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(- -; ## というか、ページの一部にフラッシュ埋め込むだけでもいけるのかな。作ったことないしワカラン参考になればと。では