今日の人気記事

  1. ブラウザーをフルスクリーン(全画面)表示に「Fullscreen」

テキストをランダムに入れ替え「scrambleText」

当ページのリンクには広告が含まれています。

スポンサーリンク

アルファベットをランダムに入れ替えるソートするプラグイン「scrambleText」を紹介します。

jQueryプラグイン「scrambleText」

このプラグインを使えば、その名の通り! テキストをごちゃ混ぜ(scramble)にします。

ごちゃ混ぜにする対象はアルファベットのみです(数字やひらがな・漢字は対象外)。

スポンサーリンク

それではデモページをご覧ください。「クリック!」というボタンをクリックし、テキストがどのように変化するのかをみてみてください。

「scrambleText」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="scrambleText のデモでーす。">
<title>scrambleText - jQuery Plugin Demo</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="jquery.scrambleText.js"></script>
<script>
$(document).ready(function() {
  $('#demo').click(function() {
    $('h1, p').scrambleText();
  });
});
</script>
</head>
<body>
<h1>scrambleText のデモ。</h1>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>あいうえお かきくけこ</p>
<p>aiueo kakikukeko</p>
<p>0123456789</p>
<p>零一二三四</p>
<button id="demo">クリック!</button>
</div>

<footer style="margin-top:20px;">
<a href="https://webkaru.net/jquery-plugin/scrambletext/">「jQueryプラグインまとめ」に戻る</a>
</footer>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)