jquery.flipプラグインの反転効果
14311 ワード
まずサイトに行きますhttp://lab.smashup.it/flip/プラグインをダウンロード
簡単なアプリケーション:
content定義反転後の要素の新しい内容は、テキスト、HTMLまたはjQueryオブジェクトとすることができます。
directionは、要素が反転する方向を定義し、オプション：tb上から下へ /btが上に降りる /lr左から右へ /l右から左、デフォルトはtbです。
カラー定義要素が反転した後の背景色は、デフォルトでは鞬99999です。（Firebugから見て分かります。）
speedは反転の速度を定義します。デフォルトは500ミリ秒です。
onBefore定義要素が反転する前のコールバック関数
アニメート定義要素を半分に反転させる場合のコールバック関数
オンEnd定義要素の反転後のコールバック関数
アプリケーションの例:
開札して当選する
http://www.helloweba.com/view-blog-184.html
簡単なアプリケーション:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
</head>
<script type="text/javascript" src="http://files.cnblogs.com/tinyphp/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.flip.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#flipbox li').click(function()
{
$(this).flip(
{
direction:'rl',
content:' '
})
$('#flipbox li').unbind('click');
})
});
</script>
<style type="text/css">
.contentFirst{ width:100px; height: 100px; background: yellow;}
*{ margin:0; padding:0;}
li{ list-style:none;}
.box{ width:615px; margin:30px auto;}
.box ul li{float:left; width:200px; height:120px; background:#FF9900;font-size: 48px; text-align:center; line-height:120px; color:#fff; margin:0 3px 3px 0; cursor:pointer;}
</style>
<div class="box" id="flipbox">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>content定義反転後の要素の新しい内容は、テキスト、HTMLまたはjQueryオブジェクトとすることができます。
directionは、要素が反転する方向を定義し、オプション：tb上から下へ /btが上に降りる /lr左から右へ /l右から左、デフォルトはtbです。
カラー定義要素が反転した後の背景色は、デフォルトでは鞬99999です。（Firebugから見て分かります。）
speedは反転の速度を定義します。デフォルトは500ミリ秒です。
onBefore定義要素が反転する前のコールバック関数
アニメート定義要素を半分に反転させる場合のコールバック関数
オンEnd定義要素の反転後のコールバック関数
アプリケーションの例:
開札して当選する
http://www.helloweba.com/view-blog-184.html