●や▲の形にテキストを流し込めるjQueryプラグイン「TextMorph」
●や▲の形に、おしゃれにテキストを流しこんで見たいときはありませんか?
jQueryプラグインTextmorphなら簡単に実現可能です。
(追記:2010/6/16)FF3.6、IE8以外だと適用されないようです。
sponsors
使用方法
Textmorphからjquery.TextMorph.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.TextMorph.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//円にする場合
var circle = new TextMorph(document.getElementById('circle'),{
width: 300,
height: 300,
lineHeight:15
});
});
</script>
あとは【circle】と言うidを対象テキストに付与すれば完成です。
<div id="circle">テキスト</div>
また、三角は下記のようにします。
下の例ではid、【triangletop】で要素をくくって下さい。
$(document).ready(function(){
var triangletop = new TextMorph(document.getElementById('triangletop'),{
draw:'triangletop',
width: 300,
height: 300,
});
});
</script>
●や▲の形にテキストを流し込めるjQueryプラグイン「TextMorph」サンプル
sponsors
記事作成:2010年6月16日 09:08
記事URL:http://www.skuare.net/2010/06/jquerytextmorph.html
TOP > javascript > テキスト関連 > ●や▲の形にテキストを流し込めるjQueryプラグイン「TextMorph」
前の記事:ワールドカップ×Twitterなサイト10
次の記事:[メモ]乱立する日本のグルーポン系サイト
あなたにはこちもお勧め!
jQuery プラグインまとめ!