javascriptの製作物1

a0002_011891_m
なんか「自慢記事書くとかwww」的なライン飛んできたから真面目なの書きます。
前に使ったjs。jQuery使用。
基本の基本ばかりだからjsある程度わかってる人には退屈な内容かも。

$(function(){
	var i = 5, tid;
	if($('#mainview').length){
		$('#mainview div a img').hover(
			function(){ 
				var ths = $(this);
				function ovImg(){
					ths.css({'transform': 'rotate(' + i + 'deg)', 'transition': 'all 0.3s ease'});
					i = i * -1;
					tid = setTimeout(function(){
						ovImg();
					}, 300);
				}
				ovImg();
			},
			function(){
				clearTimeout(tid);
				$(this).css({'transform': 'rotate(0deg)', 'transition': 'all 0.3s ease'});
			}
		);
	}
});

1行目

$(function(){処理内容});

$(document).ready(function()と同じ意味。DOMロード完了時に処理するよーって意味。ようするにHTMLが読み込み終わったら実行する。
jQueryはDOM処理後が基本になるからとりあえずつけとけ的な魔法の言葉。

2・3行目

var i = 5,tid;

varはローカル変数の宣言。上のは
var i = 5;
var tid;
の2つをまとめて宣言している。ざっくり言うとiって名前の箱とtidって名前の箱作って、iの中には数字の5を入れましたって意味。

if($(‘#mainview’).length){処理内容}

htmlにid名mainviewがあれば処理内容を実行する。
「.length」は、要素の数があるかどうかを判別する処理になり、存在しない場合は値が空になるので、存在しないという判別になる。ちなみに
if($(‘#mainview’).size()
document.getElementById(“mainview”) != null
$(“#mainview”)[0]
$(“#mainview”).get(0)
$(“#mainview”).is(“*”)
でも同じ結果になる。一応、一番早いのは
document.getElementById(“mainview”) != null
らしい。とはいえど、「$(“selector”).is(“*”)」以外はそこまで差を感じないし、「$(“selector”).is(“*”)」以外ならどれでもよさそうな気もする。

4・5・16行目

$(‘#mainview div a img’).hover(function(){処理内容1},function(){処理内容2});

jQuery。id名mainviewの中のdivタグの中のaタグの中のimgタグにマウスホバーした時にhover()の内容を実行する。
処理内容1にはマウスがセレクタに乗った時、
処理内容2にはマウスがセレクタから離れた時の処理が入る。
(セレクタ・・・ここでいう#mainview div a img)
この書き方はなんかもう定番だからこういうものって覚えた方が楽。
ちなみにfunction(){}は無名関数っていうやつ。

6行目

var ths = $(this);

ローカル変数名thsって名前の箱に、$(this)を入れる。
$(this)は、hoverされてる$(‘#mainview div a img’)が入る。
thisではなく$(this)を使っている理由は、変数名thsにjQuery用メソッドを使うため(8行目の内容)。
thisは実際便利だけどややこしい部分も多い。このthisがどれをさしてるのかー、みたいな。書いてる分には楽だけど。

7・8行目

function ovImg(){}

ovImgって名前の関数。引数なし。

ths.css({‘transform’: ‘rotate(‘ + i + ‘deg)’, ‘transition’: ‘all 0.3s ease’});

thsは$(this)。$(this)っていうのはhoverされてる$(‘#mainview div a img’)。
hoverしてる$(‘#mainview div a img’)にcssを反映させる。反映させるcssは
‘transform’: ‘rotate(‘ + i + ‘deg)’
‘transition’: ‘all 0.3s ease’
の2つ。
‘rotate(‘ + i + ‘deg)’のiは2行目で5をいれた。なので、
‘transform’: ‘rotate(5deg)’
になる。
‘transition’: ‘all 0.3s ease’は変化する時間をさしていて、0.3sで変化するよーみたいな。
要するに、0.3sかけて’transform’: ‘rotate(5deg)’に変化するアニメーションみたいなcssを反映しているということ。

9〜14行目

i = i * -1;

アスタリスクは掛け算。iはもともと5だから、この式で-5になる。

tid = setTimeout(function(){処理内容},300);

2行目で作ったtidにsetTimeout(function(){処理内容},300);をいれて、実行する。
ここでいうtidはタイマーidって呼ばれてる
tidに入れる理由は、止める処理をする時のため。
setTimeout(function(){処理内容},300);は、300ミリ秒後に処理しますよーってこと。300ミリ秒=0.3sね。

ovImg();

fuction ovImg()を実行する。

つまりどうなるかというのを整理すると
1、ths.css({‘transform’: ‘rotate(‘ + i + ‘deg)’, ‘transition’: ‘all 0.3s ease’});によって300ミリ秒かけて’rotate(5deg)’に。
2、i = i * -1;でi = -5;になる。
3、300ミリ秒後再びfunction ovImg()が実行される。
4、ths.css({‘transform’: ‘rotate(‘ + i + ‘deg)’, ‘transition’: ‘all 0.3s ease’});によって300ミリ秒かけて’rotate(-5deg)’に。(i = -5だからね!)
5、i = i * -1;でi = 5;になる。(-5×-1=5)
6、300ミリ秒後再びfunction ovImg()が実行される。
7、ths.css({‘transform’: ‘rotate(‘ + i + ‘deg)’, ‘transition’: ‘all 0.3s ease’});によって300ミリ秒かけて’rotate(5deg)’に。
8、i = i * -1;でi = -5;になる。
9、300ミリ秒後再びfunction ovImg()が実行される。


振り子みたいなアニメーションが実装できる。いえーい。

続いて、16行目以降について。

17・18行目

この2つはマウスがセレクタから離れた時の処理。

clearTimeout(tid);

「clearTimeout(タイマーid);」っていうsetTimeoutを止める処理。この例ではタイマーidはtid(10行目参照)。

$(this).css({‘transform’: ‘rotate(0deg)’, ‘transition’: ‘all 0.3s ease’});

$(this)はマウスがセレクタから離れた時の$(‘#mainview div a img’)。
マウスがセレクタから離れた時の$(‘#mainview div a img’)にcss、
transform’: ‘rotate(0deg)’
‘transition’: ‘all 0.3s ease’
を反映させる。

すごいざっくりいうと、マウスがセレクタに乗ってる間は振り子のアニメーションがずっとおきて、
マウスがセレクタから離れたら振り子止まって初期状態に戻るっていうものでした。

setIntervalメソッド使っても作れると思う。

以上。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。