画像の側にテキストを回り込ませるJavaScript「jQSlickWrap」

画像にテキストを回り込ませると、通常テキストは四角に区切られたエリア単位となります。
円や変な形状の画像のすぐ側に沿って回り込ませたい・・・そんなあなたに
jQueryプラグインのjQSlickWrapです。

使用方法

jQSlickWrapからjquery.slickwrap.jsをjQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.slickwrap.js"></script>
<script type="text/javascript">
$(function(){
	$('.class名').slickWrap();		 
});
</script>
上記を記述したら画像とテキストを以下のようにします。

<img class="class名" src="image.png" />
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
最後にCSSで画像を好きな方に寄せてください。

<style>
.class名{float:left;padding:10px;}
</style>
※HTML 5の【canvas】を使用しているのでIE6,7では・・・。

サンプル

かえるぴょこぴょこ三ぴょこぴょこあわせてぴょこぴょこ六ぴょこぴょこかえるぴょこぴょこ三ぴょこぴょこあわせてぴょこぴょこ六ぴょこぴょこかえるぴょこぴょこ三ぴょこぴょこあわせてぴょこぴょこ六ぴょこぴょこかえるぴょこぴょこ三ぴょこぴょこあわせてぴょこぴょこ六ぴょこぴょこかえるぴょこぴょこ三ぴょこぴょこあわせてぴょこぴょこ六ぴょこぴょこかえるぴょこぴょこ三ぴょこぴょこあわせてぴょこぴょこ六ぴょこぴょこかえるぴょこぴょこ三ぴょこぴょこあわせてぴょこぴょこ六ぴょこぴょこかえるぴょこぴょこ三ぴょこぴょこあわせてぴょこぴょこ六ぴょこぴょこかえるぴょこぴょこ三ぴょこぴょこあわせてぴょこぴょこ六ぴょこぴょこ


Javascriptサンプルページ一覧
skuare.net