コンテンツエリアに収まりきらないテキストや画像を上下移動でスライド表示【JavaScript】｜DAD UNION

JavaScriptでコンテンツエリア（ボックスエリア内）に収まりきらないテキストや画像情報を「↑」「↓」矢印リンクにマウスオーバーすると、上下移動でスライド表示する方法をご紹介します。

Contents

コンテンツエリアに収まりきらないテキストや画像情報を上下移動でスライド表示するCSSの記述
コンテンツエリアに収まりきらないテキストや画像情報を上下移動でスライド表示するJavaScriptの記述
コンテンツエリアに収まりきらないテキストや画像情報を上下移動でスライド表示するHTMLの記述
エリア内に収まりきれないテキストや画像を上下スライドで表示するデモページ
ソース元：Dynamic Drive- Scrollable Content script

コンテンツエリアに収まりきらないテキストや画像情報を上下移動でスライド表示するCSSの記述

※コンテンツエリア（ボックスエリア内）#idWrap、#idBoxWrapのCSS記述です。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:left;
}
#idBoxWrap{
	position:relative;
	width:200px;
	height:200px;
	border:1px solid black;
	overflow:hidden;
	margin:0 auto;
}
#idBox{
	position:absolute;
	width:170px;
	left:0;
	top:0;
}
#idBox p{
	line-height:1.6em;
	margin:5px;
}
.clLink{
	padding:25px 0 0 0;
	text-align:center;
}
.clLink a{
	text-decoration:none;
	border:solid 1px #666666;
	padding:5px;
	color:#666666;
}
.clLink a:hover{
	text-decoration:none;
	border:solid 1px #666666;
	padding:5px;
	color:#ffffff;
	background-color:#666666;
}
-->
</style>

コンテンツエリアに収まりきらないテキストや画像情報を上下移動でスライド表示するJavaScriptの記述

※マウスオーバー時にsetTimeoutでテキストや画像情報を上下移動させる関数move(コンテンツエリア，移動単位px)を用意しました。

<script type="text/javascript">
function move(id,spd){
	var obj=document.getElementById(id),max=-obj.offsetHeight+obj.parentNode.offsetHeight,top=parseInt(obj.style.top);
	if ((spd>0&&top<=0)||(spd<0&&top>=max)){
		obj.style.top=top+spd+"px";
	move.to=setTimeout(function(){ move(id,spd); },20);
	} else {
		obj.style.top=(spd>0?0:max)+"px";
	}
}
</script>

コンテンツエリアに収まりきらないテキストや画像情報を上下移動でスライド表示するHTMLの記述

※「↑」「↓」矢印リンクにマウスオーバー時onMouseover=”move(コンテンツエリア，移動単位px)”でコンテンツエリアを上下移動させ、マウスアウト時onMouseout=”clearTimeout(移動をストップ)”で上下移動をストップさせます。必要に応じて変更して下さい。

<div id="idWrap">
    <h1>ボックスエリア内に納まりきれてない情報を<br />「↑」「↓」リンクにマウスオーバーでスライドして表示します。</h1>
    
    
    <div id="idBoxWrap">
    <div id="idBox">
    
        <p>
        このボックスに入りきらないテキストや画像を<br />
        下にある↑↓リンクで上下にスライドして表示させます。<br />
        <br />
「DAD UNION（ダットユニオン）」は「世のお父さんをもっと生きやすく」をテーマにしたWEB技術メディアです。<br>
<br>
ゆくゆくはDAD＝「お父さん」「おやじ」、UNION＝「連合」「組合」で世のお父さん・おやじ同士で組合を作って「こっちだって色々頑張ってんだよ」を主張し春闘し、お父さんの価値を少しでもベースアップしていければと考えております。
</p>
    
    </div><!--/idBox-->
    </div><!--/idBoxWrap-->
    
    <div class="clLink">
    <a href="#" onMouseover="move('idBox',5)" onMouseout="clearTimeout(move.to)">↑</a>
    
    <a href="#" onMouseover="move('idBox',-5)" onMouseout="clearTimeout(move.to)">↓</a>
    </div>


</div>