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

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

自分なりのヘッダーを作る(クリックで開閉バージョン)

前記事で二回目押すとまたsetTimeoutが作動してしまい

if文が200pxまでの指定しか無いため、ループが続くバグがありました

 

ボタンのクリックにより値をマイナスしたりプラスしたりする定番のやり方で

修正&開閉可能にしました

少し動き方が雑いように感じますが...

<script type="text/JavaScript">
slide_num = 0;
header = 20;

function globalheader2(){
if(slide_num == 1){
   document.getElementById("globalheader-container").style.height = header+"px";
   header--;
   stoptimer = setTimeout("globalheader2()",1);
   if(header == 20){stopTimer(); slide_num--;}
}
else if(slide_num == 0){
   document.getElementById("globalheader-container").style.height = header+"px";
   header++;
   stoptimer = setTimeout("globalheader2()",1);
   if(header == 200){stopTimer(); slide_num++;}
}

}
function stopTimer() {
clearTimeout(stoptimer);
}
</script>

<input type="button" onClick="globalheader2()" value="※">

<>/pre>

 

中に入れる内容はまた考えたいと思います

早いことscriptもstyleのように固定して使えるようにならないかな