二人で踊り子
［別れる］［再会］
［別れる］［再会］
Sample Source......................................................................>>>
<style TYPE="text/css"><!--
.dv {color:red;font:22px bolder;text-align:center}
--></style>
<script language="JavaScript"><!--
var mid; //PIC1とPIC2のLeft位置の中間点
var midx; //上の中間点のX座標
var timerID;
function StartHallo(){
mid = (document.body.clientWidth+PIC1.style.pixelWidth)/2;
midx = mid - PIC1.style.pixelWidth;
PIC1.style.filter
="fliph()";//左右反転(右向き踊り子)
PIC2.style.filter
="nothing";//ﾌｨﾙﾀを解除
PIC1.style.visibility="visible";
PIC2.style.visibility="visible";
//PIC1とPIC2の初期位置を設定
PIC1.style.pixelLeft
= 0 - PIC1.style.pixelWidth;
PIC2.style.pixelLeft = document.body.clientWidth;
Hallo();
}
function Hallo(){
var n = 0; //配列のindex番号
var msg = new
Array(); //あいさつ言葉の配列
msg[0] = "やー！おひさしぶり！！";
msg[1] = "いやﾈー！また合っちゃった！";
msg[2] = "嫌い！早く消えてよ！";
msg[3] = "まー！今日はお綺麗ネ！";
msg[4] = "たまには一杯やりましょうﾖ！";
msg[5] = "まー、私にそっくりﾈ！";
msg[6] = "今夜は、思いっきり踊りましょうﾈ！";
msg[7] = "お会いするの、これで何度目かしら？";
//PIC1とPIC2の位置を15ﾋﾟｸｾﾙずつ移動
PIC1.style.pixelLeft += 15;
PIC2.style.pixelLeft -= 15;
if(PIC1.style.pixelLeft > midx
- 80){
clearTimeout(timerID);
n = Math.round(Math.random()*7);//0〜7の乱数
aisatu.innerText
= msg[n];//配列から言葉を得る
}else{timerID=setTimeout("Hallo();",150);}
}
function StartGubay(){
PIC1.style.filter = "";
PIC2.style.filter = "fliph()";//右向き踊り子に
aisatu.innerText = "";//あいさつ言葉を消す
Gubay();
}
function Gubay(){
//15ﾋﾟｸｾﾙずつ逆方向に移動
PIC1.style.pixelLeft -= 15;
PIC2.style.pixelLeft += 15;
if(PIC1.style.pixelLeft <= -(PIC1.width))
clearTimeout(timerID);
else timerID=setTimeout("Gubay();",150);
}
//--></script>
</head>
<body onload="StartHallo();">
<p style="color:blue;cursor:hand">
<span onclick="StartGubay();">［別れる］</span>
<span onclick="StartHallo();">［再会］</span></p>
<div id="aisatu" class="dv"></div>
<img id="PIC1" style="position:absolute;top:110;
width:80;height:115;visibility:hidden"
src="../../java/jadata/pic01.jpg">
<img id="PIC2" style="position:absolute;top:110;
width:80;height:115;visibility:hidden"
src="../../java/jadata/pic01.jpg">
<hr style="position:absolute;top:220;left:0;
width:100%;height:5;color:maroon">
end(最終更新:12/11/12)