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

左右スクロール

機能

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

MARQUEE要素なんていうIEの拡張HTMLはあるもののその汎用性は低すぎます。そこで、ダイナミックHTMLを使って、その汎用性を補おうとしたスクリプトです。

利用方法

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

改造方法

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

スタイル(STYLE属性)

CSSリファレンスに従って、変更可。

スクロールスピード

actT：移動時間：速＝小
actX：移動量

移動時間は小さいほど速く、移動量は大きいほど大きく移動します。

画像で実現したい場合は、斜めスクロールを参考にして下さい。

対応ブラウザ

IE4,NN4以上

サンプル

［サンプルを見る］［ダウンロード］

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<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>

<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 actX = 1;		//移動量

var lay,scrX;

function Init(){
	if(iIE4){
		scrX = document.body.clientWidth;
		lay = document.all("iL1");
	}
	if(iNN4){
		scrX = innerWidth;
		lay = document.layers["iL1"];
	}
	scrollX();
}

function scrollX(){
	if(iIE4){
		lay.style.posLeft = leftX;
		if(lay.style.posLeft <= 0)actX = -actX;
		if(lay.style.posLeft + lay.style.posWidth >= scrX)actX = -actX;
	}
	if(iNN4){
		lay.left = leftX;
		if(lay.left <= 0)actX = -actX;
		if(lay.left + lay.clip.width >= scrX)actX = -actX;
	}
	leftX = leftX + actX;
	setTimeout("scrollX()",actT);
}
// -->
</SCRIPT>

</HEAD>


<BODY onload="Init()">

<DIV ID="iL1" STYLE="font-size:12pt;font-weight:bold;width:240px;text-Align:center;position:absolute">
←文字をスクロールします→
</DIV>

</BODY>
</HTML>

[Go To Top]