心地よく要素を切り替えるJavaScript「jFlip」

画像ギャラリーでは切り替え方は様々あります。
jQueryのプラグインであるFlip!では、くるくると心地よく切り替えが出来るほか、画像以外の要素もくるりと切り替えられます。
心地よく要素を切り替えるJavaScript「jFlip」サンプル

使用方法
Flip!からjquery.flip.jsをjqueryからjquery.js、jQuery UIからjquery-ui.jsをダウロードします(effects coreのみでOKです)。
これらを以下のように記述します。
<script type="text/javascript" src="http://yourdomain/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://yourdomai/jquery-ui-1.6rc2.js"></script>
<script type="text/javascript" src="http://yourdomai/jquery.flip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ID名2").mouseover(function(){ //Flipさせるボタンなどの要素
$("#ID名1").flip({ //Flipさせられる要素
direction: 'bt', //方向(bt,tb,lr,rl)
bgColor: '#D46419', //背景色
color: '#D46419', //文字色
speed: 400, //スピード
content: "<div>下から上</div>" //コンテンツ
});
});
});
</script>
あとは下記のようにします。
<div id="ID名1">
デフォルト
</div>
<a id="ID名2" href="#">テキスト</a>
</div>

心地よく要素を切り替えるJavaScript「jFlip」サンプル

sponsors

「心地よく要素を切り替えるJavaScript「jFlip」」をシェアする

記事作成:
記事URL:

TOP > > > 心地よく要素を切り替えるJavaScript「jFlip」