その他■開閉幕２　幕(スクリーン)上昇落下

説明文：左端上部の『down』ボタンを押すと、幕(スクリーン)が下りてきます。
幕(スクリーン)には、文章や画像が載せられます。
下りてきた幕(スクリーン)の左端上部の『up』ボタンを押すと、スクリーンがまた上がります。
そしてメニュー部分だけ残り、スクロールしても上部にメニューが固定されます。
画像も一緒に表示されている時は固定されていないので、スクロールで上に移動します。

ページを開くと幕(スクリーン)は上がった状態で、ボタンを押して幕(スクリーン)を落下させるその他１ ■開閉幕■　幕(スクリーン)落下上昇を改造しました。
これは最初から幕(スクリーン)が落下した状態で、それを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: #adb ;color:#000;}
/*★幕(スクリーン)の指定。#maku必須*/
#maku{     
margin-top:-10px;/*★上端の隙間を消す*/
margin-left:-10px;/*★左端の隙間を消す。不要なら削除*/
position: absolute;/*★絶対位置指定*/
top: 0px; /*★最初から下りてる時は0*/
height: 300px; /*★幕の縦幅*/
width:101%;/*★横の隙間が気になる時は100%ではなく101%で*/  
border-bottom:solid 3px #888;/*★幕の下の枠線指定。濃い灰色*/
background:#ff5 url("muka11y.jpg") no-repeat;/*★幕の背景色と背景画像の1個のみ指定*/
background-size:101% 250px;/*★幕の背景画像実寸は横1024px縦200px。サイズ指定で好みに調整*/
}
/*★downとupのボタンの大きさと位置を揃える*/
input.move{
width:50px;height:20px;margin-left:20px;margin-top:130px;}
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー。説明文の文章は適当に変更して下さい-->
<input type="button" value="down" onclick=" slide(0);" title="下へ移動" class="move">　　

<p style="margin-left:20px;">説明文：左端上部の『down』ボタンを押すと、幕(スクリーン)が下りてきます。<br>
幕(スクリーン)には、文章や画像が載せられます。<br>
下りてきた幕(スクリーン)の左端上部の『up』ボタンを押すと、スクリーンがまた上がります。<br>
そしてメニュー部分だけ残り、スクロールしても上部にメニューが固定されます。<br>
画像も一緒に表示されている時は固定されていないので、スクロールで上に移動します。
</p>

<div id="maku"><!--★スクリーン部分ここから--> 
<input type="button" value="up" onclick=" slide(T);" title="上へ移動" class="move">　　

<p style="margin-top:50px;text-align:center;background-color: rgba(0,0,0,0.6);color:#fff;">説明文：左端上部の『up』ボタンを押すと、この幕(スクリーン)が上がります。メニュー部分は残り、スクロールしても上部に固定します。</p>

<!--★ここからメニュー部分-->
<p style="text-align:center;margin-top:40px;"><a href="../index.html">HOME</a>  　
<a href="../mouse_setumei.html">MOUSE</a>　　
<a href="../slide_setmei.html">SLIDE</a>　　
<a href="../link.html"> LINK</a></p><!--★ここまでメニュー部分-->

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


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

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

function step(){
maku.style.top = (y+=ddy)+'px'; 
if(--count >= 0) setTimeout(step, speed);

//★残す部分をスクロールしても動かないように固定。固定不要なら以下の２行は削除。
if(y<=T){maku.style.position="fixed";}
else{maku.style.position="absolute";}

}
//-->
</script>
<!--★ここまでコピー-->


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

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

開閉幕２ 幕(スクリーン)上昇落下 UP日時 : 2015/01/12

　開閉幕２　幕(スクリーン)上昇落下　　　　UP日時 : 2015/01/12