ルーレットアイテムを作ってみる1

スライド式の続きを読む

↓表示↓

　

jQueryに最近複雑な処理等を任せる機会は多くなりました。

確かにプラグイン自体は高度なもので、パフォーマンスの強化ははかれるでしょう。

しかしすべてをjQueryに任せてしまうと、それはJavaScriptではなく、単なるCSSの化身となってしまいます。

jQueryで代表的に作られるライブラリとして

 

• スライドバー
• ドラッグドロップアイテム
• 画像の高度なパフォーマンス
• ゲーム製作

これらのアイテムも元を言えばJavaScriptで作られています。

ただ複雑という理由で簡易になっているだけです。

いままで頼っていた、反射影効果など一度はJavaScriptのソースで書いていくのも

良いと思います。

Sample

 <script type="text/JavaScript">

num_date = 0;
height = 0;

	function hiddenly(){

		if(num_date == 0){
			document.getElementById("ins").style.height = height;
			height++;
			tell = setTimeout("hiddenly()",1);
			if(height == 200){
				document.getElementById("hidden").innerHTML = "↑表示↑";
				document.getElementById("ins").innerHTML = "フェードイン効果は<br>大体がjQueryで持つことが多いですが<br>setTimeoutとclearTimeoutを<br>駆使すれば、大抵の効果は可能となります<br>jQueryに頼ってばかりでなく、JavaScriptでかけるところはかいてしまいましょう<br>それが上達の路だと思います";
				stopper(1);
			}
		}

		else if(num_date == 1){
			document.getElementById("ins").style.height = height;
			height--;
			tell = setTimeout("hiddenly()",1);
			if(height == 0){
				document.getElementById("hidden").innerHTML = "↓表示↓";
				document.getElementById("ins").innerHTML = "";
				stopper(0);
			}
		}


}

function stopper(change){

num_date = change;
clearTimeout(tell);

}

</script>


<div id="hidden" onClick="hiddenly()">↓表示↓</div>
<div id="ins"></div>