その他■開閉幕４　幕のスクロール落下非表示

説明文：左端上部の『↓↓↓』を押すと、幕(スクリーン)が下りてきます。
幕(スクリーン)には、文章や画像が載せられます。
下りてきた幕(スクリーン)は、画面をスクロールすると自動的にまた上がります。

最初から幕(スクリーン)は落下した状態です。そして画面スクロールで上昇します。
今回は、いままで「down」ボタンだったのを矢印↓↓↓に変更し、さらにその矢印が通常は表示されず、上昇して上部に固定した時のみ表示されるようにしました。

この表示・非表示の変更は、JavaScriptのソース内で設定しています。
だからいままで、CSSはclass指定だったのをid指定に変更しました。JavaScriptではid指定の方が、操作しやすいのです。
もちろん矢印ではなく、いままでどおり「down」ボタンを使用して、ボタンを表示・非表示にしてもいいです。
その時はclass="move"をid="move"に変更して下さい。
そしてこの「down」ボタンの位置指定は、幕(スクリーン)の中の下部(上昇して画面上部に固定して残る部分)に変更します。
残ってくれないと、二度と幕(スクリーン)を落下させられなくなります。

そして今回は、幕(スクリーン)の横幅が小さくしてありますが、いままでどおりに横幅100%にしてもかまいません。中身によって横幅は変えて下さい。

今回の幕(スクリーン)の中には、その他１０ ■面白■　１時間ごとに画像変化・連番のJavaScriptが入っています。不要なら削除して下さい。
幕(スクリーン)の中には、画像や文章以外に、いろいろ入れられます。スライドショーを入れても大丈夫。
大きな画像だって、上昇するので邪魔になりません。

ページを開くと幕(スクリーン)は上がった状態で、ボタンを押して幕(スクリーン)を落下させるその他１ ■開閉幕■　幕(スクリーン)落下上昇を改造しました。
最初から落下した幕(スクリーン)が「up」ボタンで上昇する見本はその他２ ■開閉幕■　幕(スクリーン)上昇落下から。
最初から落下した幕(スクリーン)が画面スクロールで上昇する見本はその他３ ■開閉幕■　幕のスクロール上昇から。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>その他■開閉幕４　幕のスクロール落下非表示</title>

<!--★ここからコピー-->
<style type="text/css">
<!--
/*★bodyの背景色、文字色指定。お好みで*/
body{background: #eee ;color:#000;}

/*★幕(スクリーン)の指定。#maku必須*/
#maku{     
margin-top:-10px;/*★上端の隙間を消す*/
position: absolute;/*★絶対位置指定*/
top: 0px; /*★最初から下りてる時は0*/
height:250px; /*★幕の縦幅。お好みで*/
width:210px;/*★横幅。お好みで。100%指定でも可*/  
background:#fdc;/*★幕の背景色　ピンク*/
border-bottom-left-radius: 20px;/*★左下角丸*/
border-bottom-right-radius: 20px;/*★右下角丸*/
box-shadow: 5px 5px 10px #666;/*★影指定*/
text-align:center;/*★画像や文章の左右中央位置指定。不要なら削除*/
}

/*★down用の矢印領域の指定*/
#move{
width:50px;
height:20px;
visibility:hidden;/*★間違って押さないように最初は非表示指定*/
position: absolute;/*★必ず残る部分に表示させるために絶対位置指定*/
bottom:10px;
left:20px;
font-weight:bold;/*★矢印の太字指定*/
color:#ff0;/*★矢印の色　黄色*/
background:#f00;/*★矢印の背景色　赤色*/
cursor: pointer;/*★矢印上でカーソルが手の形*/
}


/*★ここから１時間ごとに画像変化のJavaScript用の指定。JavaScriptは幕(スクリーン)の中。不要ならここから削除*/
#Ga{
margin-top:45px;
background:#aaa;/*★画像が透過GIFなので背景色指定　灰色*/
padding:20px;/*★画像の余白20px指定*/
border: 2px #000 solid;/*★枠線指定　黒色*/
border-radius:10px;/*★角丸指定*/
cursor: pointer;/*★画像にマウスオンした時、マウスカーソルを『手』に変更*/
}

/*★ここまで１時間ごとに画像変化のJavaScript用の指定。不要ならここまで削除*/
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>


<!--★ここからコピー。説明文の文章は適当に変更して下さい-->

<p style="margin-left:20px;margin-top:100px;">説明文：左端上部の『↓↓↓』を押すと、幕(スクリーン)が下りてきます。<br>
幕(スクリーン)には、文章や画像が載せられます。<br>
下りてきた幕(スクリーン)は、画面をスクロールすると自動的にまた上がります。</p>



<div id="maku"><!--★幕(スクリーン)部分ここから--> 
<div onclick=" slide(0);" title="クリックで下へ移動" id="move">↓↓↓</div><!--★この行で矢印指定-->

<!--★１時間ごとに画像変化のJavaScriptと文章ここから。中身はJavaScriptではなく画像でも文章でも可。不要ならここから削除-->
<img src="" id="Ga"><br>
1時間ごとに画像変化♪

<script type="text/javascript">
<!--
/*=============================================================
１時間ごとに画像が変化　By　http://freett.com/nihonkyokujituto/download/javasc/js_top.htm
★document.write記述を削除　2015/01/15
=============================================================*/
var h= (new Date()).getHours();
var ga="oto/"+h+".gif";
Ga.src = ga;
Ga.title=""+h+"時過ぎだよ！";
//-->
</script>
<!--★１時間ごとに画像変化ののJavaScriptと文章ここまで。不要ならここまで削除-->

</div><!--★幕(スクリーン)部分ここまで-->





<script type="text/JavaScript">
<!--
/*====================================================================
スクリーン上昇落下 By JavaScript の質問用スレッド vol.7　2002/01/27
http://pc.2ch.net/test/read.cgi/hp/1010823511/ レス番号　357
★少し簡略化して残す部分を設定。最初から下りた状態で、残す部分を上部固定化
さらに画面スクロールでスクリーン上昇に設定。落下指定非表示設定　　2015/01/15
====================================================================*/
var speed=50; //★速度。数値が大きいほど遅い
var rest=60; //★残す部分の縦幅。完全に閉じる(消す)のであれば 0。残すなら、マージンの関係で少し大きめに数値を設定。50pxくらい残したいなら80を指定。お好みで

var T= -(maku.offsetHeight+20)+rest;  //★maku.offsetHeightはCSSのheightの数値。完全に隠れるように20を足す。
var y = 0;//★最初からスクリーンが下りている時は0
var ddy, count,read;
maku.style.position="absolute";
function slide(gy) { 
ddy = (gy-y)/speed; 
count = speed; 
read=setTimeout(step,speed);
} 

function step(){
maku.style.top = (y+=ddy)+'px'; 
move.style.visibility="hidden";/*●注意●矢印を非表示*/
if(--count >= 0) setTimeout(step, speed);
}

window.onscroll=function(){
slide(T);
if(y<=T){
maku.style.top=T+"px";
maku.style.position="fixed";
move.style.visibility="visible";/*★矢印を表示*/
window.clearTimeout(read);
}else{
maku.style.position="absolute";
move.style.visibility="hidden";/*★矢印を非表示*/
}
}
/*●注意●説明：上昇しても矢印が表示されない時は、もう一度少しスクロールすると表示されます。面倒な時は、この行の"hidden"を"visible"に変更して下さい。変更しても最初は矢印は表示されませんが、一度スクロールしてからは、表示されっぱなしになります。最初の時だけ表示されなければ、サイト訪問者がまごつくことはないと思います*/
//-->
</script>
<!--★ここまでコピー-->


<div style="margin:50px 10%">
<p style="padding:30px;background:#fff;border-radius:20px;">
最初から幕(スクリーン)は落下した状態です。そして<span style="color:#f00;">画面スクロールで上昇</span>します。<br>
今回は、いままで「down」ボタンだったのを矢印↓↓↓に変更し、さらにその<span style="color:#f00;">矢印が通常は表示されず、上昇して上部に固定した時のみ表示</span>されるようにしました。<br>
<br>
この表示・非表示の変更は、JavaScriptのソース内で設定しています。<br>
だからいままで、CSSはclass指定だったのをid指定に変更しました。JavaScriptではid指定の方が、操作しやすいのです。<br>
もちろん矢印ではなく、いままでどおり「down」ボタンを使用して、ボタンを表示・非表示にしてもいいです。<br>
その時はclass="move"をid="move"に変更して下さい。<br>
そしてこの「down」ボタンの位置指定は、幕(スクリーン)の中の下部(上昇して画面上部に固定して残る部分)に変更します。<br>
残ってくれないと、二度と幕(スクリーン)を落下させられなくなります。<br>
<br>
そして今回は、幕(スクリーン)の横幅が小さくしてありますが、いままでどおりに横幅100%にしてもかまいません。中身によって横幅は変えて下さい。<br>

<br>
今回の幕(スクリーン)の中には、<a href="oto/hoka_o10.html">その他１０ ■面白■　１時間ごとに画像変化・連番</a>のJavaScriptが入っています。不要なら削除して下さい。<br>
幕(スクリーン)の中には、画像や文章以外に、いろいろ入れられます。スライドショーを入れても大丈夫。<br>
大きな画像だって、上昇するので邪魔になりません。</p>
</div>

<!--★下記の罫線は、スクロールしてもメニュー部分が移動せず固定しているのがわかるように記述してあるだけなので、削除して下さい-->
<hr style="margin-top:1500px;">

<br><br><br>
</body>
</html>

開閉幕４ 幕のスクロール落下非表示 UP日時 : 2015/01/15

　開閉幕４　幕のスクロール落下非表示　　　　UP日時 : 2015/01/15