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

斜めスクロール

機能

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

マーキーの左右スクロールでは芸が無いので、ダイナミックHTMLを使って、どこでも動けるようにしたスクリプトです。

利用方法

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

改造方法

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

スタイル(Style1)

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

スクロールスピード

actT：移動時間：速＝小
actX：左右移動量
actY：上下移動量

移動時間は小さいほど速く、移動量は大きいほど大きく移動します。 actXとactYの比率を変えれば移動方向も変わります。

テキストで実現したい場合は、左右スクロールを参考にして下さい。

対応ブラウザ

IE4,NN4以上（IE5ではposWidth,posHeightが正しく取得できないため処理に異常があります）

修正

初期表示位置の修正(1999.9.13)

ページ読み込み完了までに意図しない位置に表示される不具合を解消。変更箇所は以下。

スタイルに「visibility:hidden」を追加
「scrollXY()」の４行目に「lay.style.visibility = "visible";」を追加
「scrollXY()」の１３行目に「lay.visibility = "show";」を追加

サンプル

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

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

<STYLE TYPE="text/css">
<!--
.Style1{
	position:		absolute;
	width:			88px;
	height:			31px;
}
-->
</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 = 5;		//移動時間：速＝小
var actX = 3;		//左右移動量
var actY = 2;		//上下移動量

var leftX,topX;
var scrX,scrY;

function Init(){
	if(iIE4){
		scrX = document.body.clientWidth;
		scrY = document.body.clientHeight;
		lay = document.all("iL1");
		leftX = Math.random()*scrX-lay.style.posWidth;
		topY = Math.random()*scrY-lay.style.posHeight;
	}
	if(iNN4){
		scrX = innerWidth;
		scrY = innerHeight;
		lay = document.layers["iL1"];
		leftX = Math.random()*scrX-lay.clip.width;
		topY = Math.random()*scrY-lay.clip.height;
	}
	if(leftX <= 0)leftX=1;
	if(topY <<= 0)topY=1;
	scrollXY();
}

function scrollXY(){
	if(iIE4){
		lay.style.posLeft = leftX;
		lay.style.posTop = topY;
		if(lay.style.posLeft <= 0)actX = -actX;
		if(lay.style.posLeft + lay.style.posWidth >= (scrX - actX))actX = -actX;
		if(lay.style.posTop <= 0)actY = -actY;
		if(lay.style.posTop + lay.style.posHeight >= (scrY - actY))actY = -actY;
	}
	if(iNN4){
		lay.left = leftX;
		lay.top = topY;
		if(lay.left <= 0)actX = -actX;
		if(lay.left + lay.clip.width >= (scrX - actX))actX = -actX;
		if(lay.top <= 0)actY = -actY;
		if(lay.top + lay.clip.height >= (scrY - actY))actY = -actY;
	}
	leftX = leftX + actX;
	topY = topY + actY;
	setTimeout("scrollXY()",actT);
}
// -->
</SCRIPT>

</HEAD>

<BODY onload="Init()">

<DIV>
イメージが飛び回ります<BR>
リンクも出来ちゃったりして<BR><BR>
飛び回るバナーをクリックすると・・・？<BR>
</DIV>

<DIV ID="iL1" CLASS="Style1">
<A HREF="http://www.hajimeteno.ne.jp/">
<IMG SRC="./multi.gif" BORDER=0>
</A>
</DIV>

</BODY>
</HTML>

[Go To Top]