javascriptの製作物１ | なんかいろいろデザインする人

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'});
			}
		);
	}
});

１行目

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

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

２・３行目

var i = 5,tid;

varはローカル変数の宣言。上のは
var i = 5;
var tid;
の２つをまとめて宣言している。ざっくり言うと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(“*”)」以外ならどれでもよさそうな気もする。

４・５・１６行目

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

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

６行目

var ths = $(this);

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

７・８行目

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’
の２つ。
‘rotate(‘ + i + ‘deg)’のiは２行目で５をいれた。なので、
‘transform’: ‘rotate(5deg)’
になる。
‘transition’: ‘all 0.3s ease’は変化する時間をさしていて、0.3sで変化するよーみたいな。
要するに、0.3sかけて’transform’: ‘rotate(5deg)’に変化するアニメーションみたいなcssを反映しているということ。

９〜１４行目

i = i * -1;

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

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

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

ovImg();

fuction ovImg()を実行する。

つまりどうなるかというのを整理すると
１、ths.css({‘transform’: ‘rotate(‘ + i + ‘deg)’, ‘transition’: ‘all 0.3s ease’});によって300ミリ秒かけて’rotate(5deg)’に。
２、i = i * -1;でi = -5;になる。
３、300ミリ秒後再びfunction ovImg()が実行される。
４、ths.css({‘transform’: ‘rotate(‘ + i + ‘deg)’, ‘transition’: ‘all 0.3s ease’});によって300ミリ秒かけて’rotate(-5deg)’に。（i = -5だからね！）
５、i = i * -1;でi = 5;になる。（-5×-1=5）
６、300ミリ秒後再びfunction ovImg()が実行される。
７、ths.css({‘transform’: ‘rotate(‘ + i + ‘deg)’, ‘transition’: ‘all 0.3s ease’});によって300ミリ秒かけて’rotate(5deg)’に。
８、i = i * -1;でi = -5;になる。
９、300ミリ秒後再びfunction ovImg()が実行される。
・
・
・

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

続いて、１６行目以降について。

１７・１８行目

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

clearTimeout(tid);

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

$(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メソッド使っても作れると思う。

以上。

１行目