読者です 読者をやめる 読者になる 読者になる

flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

ルーレットアイテムを作ってみる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>