Flip!


Description: 要素がフリップ(ひっくり返す)するWebギャラリーです。縦や横に対応します。クロスブラウザ対応でとてもシンプルなので汎用的に使えそうですね。
Sample: demo
Tutorial: Flip!
License: MITとGPL

Sample

こんにちは

Note

	$(function(){

				$("#flipPad a:not(.revert)").bind("click",function(){
					var $this = $(this);
					$("#flipbox").flip({
						direction: $this.attr("rel"),
						color: $this.attr("rev"),
						content: $this.attr("title"),//(new Date()).getTime(),
						onBefore: function(){$(".revert").show()}
					})
					return false;
				});

				$(".revert").bind("click",function(){
					$("#flipbox").revertFlip();
					return false;
				});

				var changeMailTo = function(){
					var mArr = ["@","smashup","luca",".it"];
					$("#email").attr("href","mailto:"+mArr[2]+mArr[0]+mArr[1]+mArr[3]);
				}

				$(".downloadBtn").click(function(){
					pageTracker._trackPageview('download_flip');
				});	

				setTimeout(changeMailTo,500);

			});

プラグインと上記コードで動作します

Related snippet :

  • Description: 画像をクリックするとフリップ(ひっくり返る)するコンテンツを実装するjQueryプラグインです。uiも必要となります。IE6ではフリップするとレイア ...
  • Description: 動的にタブを生成するプラグインです。タブはページ推移無しでコンテンツを切り替えることが可能です。クロスブラウザ対応ですが、IE6だけ多少cssハ ...
  • Description: 大量の要素に対して、指定方向へ順番にフェードを適用させ、ユニークなアニメーションコンテンツを実装します。個人的には若干鬱陶しくなりそうな気がしますが ...
  • Description: マウスをストーキングするツールチップです。手軽に実装出来る汎用性と、マウスについてくるユニークさが特徴。背景に画像を使うことも出来るのでユニークな表 ...
  • Description: かっこいいエフェクトでメニューを呼び出すプラグイン。ゲームみたいですね・・・クロスブラウザでは動作しませんが、なかなか印象的な見せ方ではないかなと思 ...
  • Description: 画像にマウスオーバーすると拡大するコード。簡単に実装できて様々なところに応用できそうですね。クロスブラウザで動作してくれます。メニューにも使えるかな ...
  • Description: テーブルにヒートカラーを追加するプラグインです。色付けするとどうしても見にくいテーブルがとても可視性が高くなります。また、ソートも可能でクロスブラウ ...