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

左端上部の『down』ボタンを押すと、幕(スクリーン)が下りてきます。
幕(スクリーン)には、文章や画像が載せられます。
下りてきた幕(スクリーン)の左端上部の『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{background:fixed url("kc3_sma.jpg") #00020e repeat-x bottom left;color:#ffffff;}

/*★幕(スクリーン)の指定。#maku必須*/
#maku{     
margin-top:-10px;/*★上端の隙間を消す*/
margin-left:-10px;/*★左端の隙間を消す。不要なら削除*/
position: absolute;/*★絶対位置指定*/
top: -300px; /*★完全に隠れるように、幕の縦幅より大きい数値のマイナスで*/
height: 280px; /*★幕の縦幅。お好みで*/
width: 100%; /*★幕の横幅*/  
border-bottom: dotted #f00 3px;/*★幕の下枠線指定。赤のドット線。お好みで。不要なら削除*/ 
background:#000000 url("and1.gif") repeat-x;/*★幕の背景画像の上部一列指定*/
}
/*★downとupのボタンの大きさと位置を揃える*/
input.move{
width:50px;height:20px;margin-left:20px;margin-top:90px;}
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

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

<p>説明文：左端上部の『down』ボタンを押すと、幕(スクリーン)が下りてきます。<br>
幕(スクリーン)には、文章や画像が載せられます。<br>
下りてきた幕(スクリーン)の左端上部の『up』ボタンを押すと、幕(スクリーン)が上がって元に戻ります。</p>


<div id="maku"><!--★幕(スクリーン)部分ここから。説明文の文章は適当に変更して下さい--> 
<input type="button" value="up" onclick=" slide(T);" title="上へ移動" class="move">　

<p style="text-align:left;margin-left:20px;">
説明文：左端上部の『up』ボタンを押すと、この幕(スクリーン)が上がって元に戻ります。<br>
前回よりJavaScriptを簡略化し、完全に戻さずに少し残すことも可能にしました。この見本では、完全に戻ります。<br>
原本は<a href="http://pc.2ch.net/test/read.cgi/hp/1010823511/" target="_new">JavaScript の質問用スレッド vol.7</a>の「レス番号　357」です。
</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=0; /*★残す部分の縦幅。完全に閉じる(消す)のであれば 0。残すなら、マージンの関係で少し大きめに数値を設定。50pxくらい残したいなら80を指定。お好みで*/
var T=maku.offsetTop+rest;
var y =maku.offsetTop+rest;  //★maku.offsetTopはCSSのtopの数値　
var ddy, count; 

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); 
} 
//-->
</script>
<!--★ここまでコピー-->

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

開閉幕１ 幕(スクリーン)落下上昇 最終修正日 : 2015/01/12

　開閉幕１　幕(スクリーン)落下上昇　　　　最終修正日 : 2015/01/12