Compact News Previewer with jQuery


Description: 省スペースで多くのコンテンツを見ることが出来るコンパクトニュースビューアを実装出来るプラグインです。css3を利用しているのでデモと同じように実装するのは骨が折れそうですが、IE6や7でも動作はします。easingも使います。
Sample: demo
Tutorial: Compact News Previewer with jQuery
License: -

Sample

その1です

2010/12/30
その1

ここに「その1」の文章が入ります

Read more

その2です

2010/12/30
その2

ここに「その2」の文章が入ります

Read more

その3

2010/12/30
その3

ここに「その3」の文章が入ります

Read more

その4です

2010/12/30
その4

ここに「その4」の文章が入ります

Read more

その5です

2010/12/30
その5

ここに「その5」の文章が入ります

Read more

その6です

2010/12/30
その6

ここに「その6」の文章が入ります

Read more

その1です

その1に関する情報はここをクリック

その2です

その2に関する情報はここをクリック

その3です

その3に関する情報はここをクリック

その4です

その4に関する情報はここをクリック

その5です

その5に関する情報はここをクリック

その6です

その6に関する情報はここをクリック

Note

   $(function() {
                //caching
				//next and prev buttons
				var $cn_next	= $('#cn_next');
				var $cn_prev	= $('#cn_prev');
				//wrapper of the left items
				var $cn_list 	= $('#cn_list');
				var $pages		= $cn_list.find('.cn_page');
				//how many pages
				var cnt_pages	= $pages.length;
				//the default page is the first one
				var page		= 1;
				//list of news (left items)
				var $items 		= $cn_list.find('.cn_item');
				//the current item being viewed (right side)
				var $cn_preview = $('#cn_preview');
				//index of the item being viewed.
				//the default is the first one
				var current		= 1;

				$items.each(function(i){
					var $item = $(this);
					$item.data('idx',i+1);

					$item.bind('click',function(){
						var $this 		= $(this);
						$cn_list.find('.selected').removeClass('selected');
						$this.addClass('selected');
						var idx			= $(this).data('idx');
						var $current 	= $cn_preview.find('.cn_content:nth-child('+current+')');
						var $next		= $cn_preview.find('.cn_content:nth-child('+idx+')');

						if(idx > current){
							$current.stop().animate({'top':'-300px'},600,'easeOutBack',function(){
								$(this).css({'top':'310px'});
							});
							$next.css({'top':'310px'}).stop().animate({'top':'5px'},600,'easeOutBack');
						}
						else if(idx < current){
							$current.stop().animate({'top':'310px'},600,'easeOutBack',function(){
								$(this).css({'top':'310px'});
							});
							$next.css({'top':'-300px'}).stop().animate({'top':'5px'},600,'easeOutBack');
						}
						current = idx;
					});
				});

				$cn_next.bind('click',function(e){
					var $this = $(this);
					$cn_prev.removeClass('disabled');
					++page;
					if(page == cnt_pages)
						$this.addClass('disabled');
					if(page > cnt_pages){
						page = cnt_pages;
						return;
					}
					$pages.hide();
					$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
					e.preventDefault();
				});

				$cn_prev.bind('click',function(e){
					var $this = $(this);
					$cn_next.removeClass('disabled');
					--page;
					if(page == 1)
						$this.addClass('disabled');
					if(page < 1){
						page = 1;
						return;
					}
					$pages.hide();
					$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
					e.preventDefault();
				});

            });

軽量で作れますね。

Related snippet :

  • Description: タブメニューにマウスを乗せるだけでコンテンツを切り替えます。IE6だけ表示が崩れるので対策が必要です。使い勝手はとても良いのでうまく使っていきたいで ...
  • Description: コンテンツスライダーにバリデーション付きのコンタクトフォームを埋め込んだもの。不備があるとチェックが付きます。順番も追えるのでユーザーとしても縦 ...
  • Description: クールなエフェクトのフライアウトメニューです。css3も併用しています。要jquery.easingです。 Sample: demo ...
  • Description: アニメーションしながら縦に開閉するアコーディオン式のパネルです。弾むようなエフェクトが可愛いですね。他のパネルを開くと元々開いていたパネルは閉じられ ...
  • Description: バー全体が降りてくるタイプのドロップダウンメニューです。横並びに羅列されるので、下部コンテンツを邪魔することもありません。クロスブラウザで動作します ...
  • Description: マウスオーバーで可愛いアイコンが降り、離すと裏から戻る、というアニメーションのグローバルメニューです。ユニークでインパクト有ります。 Sa ...
  • Description: マウスオーバーで四方に画像が分かれ、別のコンテンツが表示される、というもの。マウスを離すと自動で戻りますが、その時のアニメーションエフェクトにも工夫 ...