SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [左右マルチスクロール]

Dynamic HTMLの参考書 Java Scriptの参考書

左右マルチスクロール

機能

テキストや画像を左右にスクロールさせるダイナミックHTMLです。

MARQUEE要素なんていうIEの拡張HTMLはあるもののその汎用性は低すぎます。 そこで、ダイナミックHTMLを使って、その汎用性を補おうとしたスクリプトです。 しかも複数のテキスト移動が可能です。(単体の場合は「左右スクロール」)

利用方法

HEAD部分にスクリプトを記述します。 BODY部分には、任意の場所にDIV要素に対してID属性iL1とスクロールするテキストのスタイルを指定します。

改造方法

スクロールするテキストの速さとスタイルを変更可能です。

スタイル(STYLE属性)
テキストの見栄えを変更します。 CSSリファレンスに従って、変更可。 ただし、topとwidthはstyle属性を使って個別に指定しています。
スクロールスピード
移動時間は小さいほど速く、移動量は大きいほど大きく移動します。 複数のテキストをDIV要素で指定し、このid属性をiL1...iLnとします。(サンプルでは1,2,3) このそれぞれに対してactXを指定します。また、最大数を「maxAct」に指定します。

対応ブラウザ

IE4,NN4以上

サンプル

サンプルを見る] [ダウンロード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>左右マルチスクロール</title>

<style type="text/css">
<!--
.Style1{
	position:		absolute;
	font-size:		14pt;
	font-weight:	bold;
	color:			#0000cc;
	text-align:		center;
}
-->
</style>

<script language="javascript" type="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var actT = 1;				//移動時間:速=小
var leftX = 100;			//初期表示左位置
var maxAct = 3;				//スクロールするレイヤーの最大数
var actX = new Array();	//移動量
actX[0] = 1;
actX[1] = 2;
actX[2] = 4;

var lay = new Array();

function Init(){
	var i;
	if(iIE4){
		scrX = document.body.clientWidth;
		for(i = 0; i < maxAct; i++){
			lay[i] = document.all("iL"+(i+1));
		}
	}
	if(iNN4){
		scrX = innerWidth;
		for(i = 0; i < maxAct; i++){
			lay[i] = document.layers["iL"+(i+1)];
		}
	}
	scrollX();
}

function scrollX(){
	var i;
	for(i = 0; i < maxAct; i++){
		if(iIE4){
			lay[i].style.posLeft = lay[i].style.posLeft + actX[i];
			if(lay[i].style.posLeft <= 0)actX[i] = -actX[i];
			if(lay[i].style.posLeft + lay[i].style.posWidth >= scrX)actX[i] = -actX[i];
		}
		if(iNN4){
			lay[i].left = lay[i].left + actX[i];
			if(lay[i].left <= 0)actX[i] = -actX[i];
			if(lay[i].left + lay[i].clip.width >= scrX)actX[i] = -actX[i];
		}
	}
	setTimeout("scrollX()",actT);
}
// -->
</script>

</head>

<body onload="Init()">

<div id="iL1" class="Style1" style="top:10px;width:180px">←スクロール1→</div>
<div id="iL2" class="Style1" style="top:50px;width:180px">←スクロール2→</div>
<div id="iL3" class="Style1" style="top:90px;width:180px">←スクロール3→</div>

</body>
</html>
[Go To Top]

Last modified Aug,2000
Copyright(C)2000 T.Miyazaki , All Rights Reserved.