【JavaScript】文字がブルブルするスクリプト

我安排以前的职位
I arranged the previous post.
前回の投稿を元に、別のスクリプトを書いてみました。

下の囲みの中の文字にマウスを持って行って下さい。

(((((((( ;゚Д゚)))))))ガクガクブルブルガタガタブルガタガクガクガクガクガク

ガー(゚Д゚;)ー( ゚Д)ー(  ゚)ー(   )ー(゚;  )ー(Д゚; )ー(゚Д゚;)ーン!!!!!

工エエェェΣ(゜Д゜ノ)ノェェエエ工

( ゚∀゚)アハハ八八ノヽノヽノヽノ \ / \/ \

ァ '`,、 (^ヮ^) '`,、'`

_(:D) ̄|_

_/乙(、ン、)ノ

  ,ハ,,,ハ

  (。・ω・)つ,☆オシリ ペンペン

   と_,、⌒) )

     ,(_ ノノ

          .o゜*。o

         /⌒ヽ*゜*

   ∧_∧ /ヽ    )。*o  ッパ

    (・ω・)丿゛ ̄ ̄' ゜

.  ノ/  /

  ノ ̄ゝ

 ̄|                        ┌‐┐

__|_                    _l__|_ ┌‐┐

 ^ω^)     /⌒ヽ \  /       (^ω^) _l__|_

7 ⌒い    _( ^ω^)   X.   /⌒ヽ /   ヽ (^ω^)

    | l   /フ ̄⌒ヽ n/  \ (^ω^ )_    l  /   ヽ

 \ \ (/l、__\__ソ     (^Vヽ  ̄ 、 \    l    |

   \ /っ / ,(_\       ー' 人 ̄ )(つ

    │/_/  /__ノ        〈__r‐\ \

___)─'   └--'       └-┘  (フ

│ | │

┤ ト-ヘ

つれづれなるまゝに、

日ぐらし硯に向かひて、

心にうつりゆくよしなしごとを

そこはかとなく書き付くれば、

あやしうこそ物狂ほしけれ。

                   ∧∧ ∩

                  (´・ω・`)/

             ハ_ハ   ⊂   ノ    ハ_ハ

           ('(・ω・`∩  (つ ノ   ∩´・ω・)')

       ハ_ハ   ヽ  〈    (ノ    〉  /     ハ_ハ

     ('(・ω・`∩  ヽヽ_)        (_ノ ノ   ∩´・ω・)')

     O,_  〈                      〉  ,_O

       `ヽ_)                     (_/ ´

   ハ_ハ                                 ハ_ハ

⊂(・ω・`⊂⌒`⊃                       ⊂´⌒⊃´・ω・) ⊃

備忘録的な説明はソースの中にコメントで残しておきました。

<style>
#sample20120819{
	width:500px;
	padding:1em;
	border:1px solid #000;
	background:#fff;
}
#sample20120819 .random_text a{
	color:#000;
	text-decoration:none;
	display:block
	float:left;
	position:relative;
	cursor:pointer;
}
#sample20120819 .aa{
	font-family:'MS ゴシック','MSゴシック','MSゴシック','MS ゴシック'!important;
	letter-spacing:0 !important;
	font-size:12px !important;
	line-height:12px !important;
	margin:0;
	padding:0;
} 
#sample20120819 .clearfix:after{
	content: "."; 
	display: block; 
	height: 0; 
	font-size:0;
	clear: both; 
	visibility:hidden;
}
#sample20120819 .clearfix{
	display: inline-block;
} 
/* Hides from IE Mac */
* html #sample20120819 .clearfix{
	height: 1%;
}
#sample20120819 .clearfix{
	display:block;
}
</style>
<div id="sample20120819">
	<p class="clearfix random_text"><a>(((((((( ;゚Д゚)))))))ガクガクブルブルガタガタブルガタガクガクガクガクガク </a></p>
	<p class="clearfix random_text"><a>ガー(゚Д゚;)ー( ゚Д)ー(  ゚)ー(   )ー(゚;  )ー(Д゚; )ー(゚Д゚;)ーン!!!!! </a></p>
	<p class="clearfix random_text"><a>工エエェェΣ(゜Д゜ノ)ノェェエエ工</a></p>
	<p class="clearfix random_text"><a>( ゚∀゚)アハハ八八ノヽノヽノヽノ \ / \/ \</a></p>
	<p class="clearfix random_text"><a>ァ '`,、 (^ヮ^) '`,、'`</a></p>
	<p class="clearfix random_text"><a>_(:D) ̄|_</a></p>
	<p class="clearfix random_text"><a>_/乙(、ン、)ノ</a></p>
	<p class="clearfix random_text"><a></a></p>
	<p class="clearfix random_text aa"><a>  ,ハ,,,ハ</a></p>
	<p class="clearfix random_text aa"><a>  (。・ω・)つ,☆オシリ ペンペン</a></p>
	<p class="clearfix random_text aa"><a>   と_,、⌒) )</a></p>
	<p class="clearfix random_text aa"><a>     ,(_ ノノ</a></p>
	<p class="clearfix random_text"><a></a></p>
	<p class="clearfix random_text aa"><a>          .o゜*。o</a></p>
	<p class="clearfix random_text aa"><a>         /⌒ヽ*゜*</a></p>
	<p class="clearfix random_text aa"><a>   ∧_∧ /ヽ    )。*o  ッパ</a></p>
	<p class="clearfix random_text aa"><a>    (・ω・)丿゛ ̄ ̄' ゜</a></p>
	<p class="clearfix random_text aa"><a>.  ノ/  /</a></p>
	<p class="clearfix random_text aa"><a>  ノ ̄ゝ </a></p>
	<p class="clearfix random_text"><a></a></p>
	<p class="clearfix random_text aa"><a> ̄|                        ┌‐┐</a></p>
	<p class="clearfix random_text aa"><a>__|_                    _l__|_ ┌‐┐</a></p>
	<p class="clearfix random_text aa"><a> ^ω^)     /⌒ヽ \  /       (^ω^) _l__|_</a></p>
	<p class="clearfix random_text aa"><a>7 ⌒い    _( ^ω^)   X.   /⌒ヽ /   ヽ (^ω^)</a></p>
	<p class="clearfix random_text aa"><a>    | l   /フ ̄⌒ヽ n/  \ (^ω^ )_    l  /   ヽ</a></p>
	<p class="clearfix random_text aa"><a> \ \ (/l、__\__ソ     (^Vヽ  ̄ 、 \    l    |</a></p>
	<p class="clearfix random_text aa"><a>   \ /っ / ,(_\       ー' 人 ̄ )(つ</a></p>
	<p class="clearfix random_text aa"><a>    │/_/  /__ノ        〈__r‐\ \</a></p>
	<p class="clearfix random_text aa"><a>___)─'   └--'       └-┘  (フ</a></p>
	<p class="clearfix random_text aa"><a>│ | │</a></p>
	<p class="clearfix random_text aa"><a>┤ ト-ヘ </a></p>
	<p class="clearfix random_text"><a></a></p>
	<p class="clearfix random_text"><a></a></p>
	<p class="clearfix random_text"><a>つれづれなるまゝに、</a></p>
	<p class="clearfix random_text"><a>日ぐらし硯に向かひて、</a></p>
	<p class="clearfix random_text"><a>心にうつりゆくよしなしごとを</a></p>
	<p class="clearfix random_text"><a>そこはかとなく書き付くれば、</a></p>
	<p class="clearfix random_text"><a>あやしうこそ物狂ほしけれ。</a></p>
	<p class="clearfix random_text aa"><a>                   ∧∧ ∩</a></p>
	<p class="clearfix random_text aa"><a>                  (´・ω・`)/</a></p>
	<p class="clearfix random_text aa"><a>             ハ_ハ   ⊂   ノ    ハ_ハ</a></p>
	<p class="clearfix random_text aa"><a>           ('(・ω・`∩  (つ ノ   ∩´・ω・)')</a></p>
	<p class="clearfix random_text aa"><a>       ハ_ハ   ヽ  〈    (ノ    〉  /     ハ_ハ</a></p>
	<p class="clearfix random_text aa"><a>     ('(・ω・`∩  ヽヽ_)        (_ノ ノ   ∩´・ω・)')</a></p>
	<p class="clearfix random_text aa"><a>     O,_  〈                      〉  ,_O</a></p>
	<p class="clearfix random_text aa"><a>       `ヽ_)                     (_/ ´</a></p>
	<p class="clearfix random_text aa"><a>   ハ_ハ                                 ハ_ハ</a></p>
	<p class="clearfix random_text aa"><a>⊂(・ω・`⊂⌒`⊃                       ⊂´⌒⊃´・ω・) ⊃</a></p>
</div>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
var sample20120819_elms=$(".random_text").length;//対象となるエレメント数
var sample20120819_cnt=new Array;//カウンター
var sample20120819_cntMax=200;//処理回数
var sample20120819_initial=new Array;//元の文字列
var sample20120819_newLetter=new Array;//実行中の文字列
var sample20120819_temp=new Array;//実行中の文字列を作る際の一時的な変数
var sample20120819_letter_length=new Array;//元の文字数
var sample20120819_position=new Array;//処理を加える文字の位置
var sample20120819_move=new Array;//動かす距離
var sample20120819_moveMax=5;//動かす距離の最大値
var sample20120819_speed=0;//文字を動かしてから戻すまでの待ち時間

//元の文字を、1文字ずつ<a></a>で囲む
for(i=0;i<sample20120819_elms;i++){
	sample20120819_cnt[i]=0;
	sample20120819_initial[i]=$("#sample20120819 .random_text a").eq(i).html();
	sample20120819_letter_length[i]=sample20120819_initial[i].length;
	sample20120819_newLetter[i]="<a>"
	sample20120819_temp[i]=sample20120819_initial[i].split("");
	for(j=0;j<sample20120819_letter_length[i]-1;j++){
		sample20120819_newLetter[i]+=sample20120819_temp[i][j]+"</a><a>";
	}
	sample20120819_newLetter[i]+=sample20120819_temp[i][sample20120819_letter_length[i]-1]+"</a>"
}


$("#sample20120819 .random_text").hover(
	function(){
		var lineNo=$(".random_text").index(this);
		$(".random_text").eq(lineNo).html(sample20120819_newLetter[lineNo]);
		sample20120819_rewrite(lineNo);
	},
	function(){
	}
)


function sample20120819_rewrite(i){

	sample20120819_position[i]=Math.floor(Math.random()*sample20120819_letter_length[i]);
	sample20120819_move[i]=Math.floor(Math.random()*(sample20120819_moveMax*2+1)-sample20120819_moveMax);

	sample20120819_cnt[i]+=1;
	if(sample20120819_cnt[i]<sample20120819_cntMax){
		var thisElement=$(".random_text").eq(i);
		$("a",thisElement).eq(sample20120819_position[i]).css("top",sample20120819_move[i]+"px");
		setTimeout(function(){
			$("a",thisElement).eq(sample20120819_position[i]).css("top",0);
			sample20120819_rewrite(i)
		},sample20120819_speed);
	}
	else{
		$(".random_text").eq(i).html(sample20120819_initial[i]);
		sample20120819_cnt[i]=0;
	}
}
</script>
Filed under: 未分類     12:00 AM
トラックバック

このエントリーのトラックバックURL:

コメントはまだありません »

No comments yet.

Leave a comment





(一部のHTMLタグを使うことができます。)