フォーラム@nifty | フォーラム・サークル | サイトマップ | ヘルプ |
掲示板 コラム お役立ち イベント リンク   | FHPGサイトマップ | お問い合わせ |
TOP > お役立ち > JavaScriptのおもちゃ箱 > 動く画像  

動く画像

原案:ともひろ (2000/04/01 登録)

 マーキーをレイヤで再現!!

表示サンプル

style="position: absolute; left: 20px; top: 330px; width:234px; height:60px; z-index:1; visibility: visible"> FHPG

ソース記述内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>動く画像</title>
<script type="text/javascript">
<!--

var id=10;

function RightMove(name) {
	window.clearInterval(id);
	id = window.setInterval("StepRight('"+name+"')",100);
}

function StepRight(name) {
	var left,max_left;

	if(navigator.appName=="Netscape") {
		left=whichLayerStyle(name).left+=10;
		max_left=window.innerWidth;
	} else {
		left=whichLayerStyle(name).posLeft+=10;
		max_left=document.body.clientWidth;
	}

	if(left>max_left) {
		if(navigator.appName=="Netscape") {
			whichLayerStyle(name).left=-whichLayerStyle(name).clip.width;
		} else {
			whichLayerStyle(name).posLeft=-whichLayerStyle(name).posWidth;
		}
	}

}

function LeftMove(name) {
	window.clearInterval(id);
	id = window.setInterval("StepLeft('"+name+"')",100);
}

function StepLeft(name) {
	var left,min_left;

	if(navigator.appName=="Netscape") {
		min_left=-whichLayerStyle(name).clip.width;
		left=whichLayerStyle(name).left-=10;
	} else {
		min_left=-whichLayerStyle(name).posWidth;
		left=whichLayerStyle(name).posLeft-=10;
	}

	if(left<min_left) {
		if(navigator.appName=="Netscape") {
			whichLayerStyle(name).left=window.innerWidth;
		} else {
			whichLayerStyle(name).posLeft=document.body.clientWidth;
		}
	}

}

function whichLayerStyle(name) {
	if(navigator.appName=="Netscape") return document[name];
        else return document.all[name].style;
}

//-->
</script>
</head>
<body>
<div style="height:60px">
<script type="text/javascript">
<!--
	document.write('<div name="moving_layer"');
	if(navigator.appName!="Netscape") document.write('id="moving_layer"');
// -->
</script>
    style="position: absolute; left: 20px; top: 10px; width:234px; height:60px; z-index:1; visibility: visible">
    <img src="http://forum.nifty.com/fhpg/common/images/fhpg.gif" width="234" height="60" alt="FHPG">
  </div> 
</div>
<form>
  <input type="button" value="- 左 -" onClick="LeftMove('moving_layer')">
  <input type="button" value="- 右 -" onClick="RightMove('moving_layer')">
</form>
</body>
</html>
個人情報保護ポリシー
Copyright© NIFTY 2006 All Rights Reserved.
Copyright© FHPG 2006 All Rights Reserved.