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

左右マルチスクロール

機能

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

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

利用方法

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

改造方法

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

スタイル(STYLE属性)

テキストの見栄えを変更します。 CSSリファレンスに従って、変更可。ただし、topとwidthはstyle属性を使って個別に指定しています。

スクロールスピード

actT：移動時間：速＝小
actX[i]：移動量

移動時間は小さいほど速く、移動量は大きいほど大きく移動します。複数のテキストを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">←スクロール１→</div>
<div id="iL2" class="Style1" style="top:50px;width:180px">←スクロール２→</div>
<div id="iL3" class="Style1" style="top:90px;width:180px">←スクロール３→</div>

</body>
</html>

[Go To Top]