動く画像 |
◆動く画像◆ |
■■１■■
[概要]
画面のスクロールにしたがって右下に常にロゴが表示される。
[参照]
DHTML講座（配置 等・・・）
[ソース]
<HTML>
<HEAD>
<TITLE>
ロゴ
</TITLE>
<SCRIPT language="JavaScript">
<!--
var img_width = 100;
//ロゴ画像の横幅
var img_height = 100;
//ロゴ画像の縦幅
function putLogo(){
if(document.all){
logo.style.left = document.body.scrollLeft +
document.body.clientWidth - img_width;
logo.style.top = document.body.scrollTop +
document.body.clientHeight - img_height;
}
//小さいほど滑らか（？）になるが重くなる
setTimeout("putLogo()",50);
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="putLogo()">
//ロゴの表示
<DIV id="logo" style={position:absolute;}>
<IMG src="../../../gazou/make_HP_banner.gif"
width=100 height=100>
</DIV>
</BODY>
</HTML>
※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■２■■
[概要]
画面内を画像がポンポン跳ね返る
[参照]
DHTML講座（配置 等・・・）
[ソース]
<HTML>
<HEAD>
<TITLE>バウンド</TITLE>
<SCRIPT language="JavaScript">
<!--
var move_x = 20;
//Xの移動距離
var move_y = 20;
//Yの移動距離
var x = move_x; //跳ね返り用
var y = move_y; //跳ね返り用
var ball_w; //画像の幅
var ball_h; //画像の高さ
function init(){
ball_w = ball.width;
//画像の幅取得
ball_h = ball.height;
//画像の高さ取得
}
function bound(){
//画面の右端にきたらX方向の動きを逆にする
if(ball.style.posLeft<=x || ball.style.posLeft>=document.body.clientWidth-ball_w-x){
move_x = -move_x;
}
//画面の下端にきたらY方向の動きを逆にする
if(ball.style.posTop<=y || ball.style.posTop>=document.body.clientHeight-ball_h-y){
move_y = -move_y;
}
ball.style.posLeft
+= move_x;
ball.style.posTop
+= move_y;
setTimeout("bound()",0); //繰返し（移動）速度
}
// -->
</SCRIPT>
</HEAD>
<BODY onload="init();bound();">
<!--ボールの画像-->
<IMG src="../../../../sozai/icon/other/5.gif" width=30
height=30 id="ball" style={position:absolute;top:30;left:30;}>
</BODY>
</HTML>
※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
