トランポリン・ショー
上下にトランポリン 前後にトランポリン
上下にトランポリン 前後にトランポリン
Sample Source......................................................................>>>
<script language="JavaScript"><!--
var dt = 10; //Top位置の変化量
var t = 15; //ﾀｲﾏｰ間隔の初期値
var n = 7; //ﾀｲﾏｰ間隔の変化量
var flg = 0; //動作を識別するﾌﾗｸﾞ変数
var timer1,timer2;
function Start1(){ //上下ﾄﾗﾝﾎﾟﾘﾝの制御ﾎﾞﾀﾝ
if(bt1.innerText == "開始" && flg == 0){
Toran1();
bt1.innerText = "停止";
flg = 1;
}else if(flg == 1){ //上下ﾄﾗﾝﾎﾟﾘﾝを停止
bt1.innerText = "開始";
clearTimeout(timer1);
//以下、各値を初期化する
pic.style.pixelTop = 200;
dt = 10;
t = 15;
n = 7;
flg = 0;
}
}
function Toran1(){
//上下ﾄﾗﾝﾎﾟﾘﾝの実行関数
pic.style.pixelTop -= dt;
if(pic.style.pixelTop < 50 || pic.style.pixelTop > 200){
dt = -dt;
n = -n;
}
t += n;
timer1 = setTimeout("Toran1()",t);
}
//･･･(以下、前後ﾄﾗﾝﾎﾟﾘﾝ)････････････････
var dl = 4; //Left位置の変化量
function Start2(){
//前後ﾄﾗﾝﾎﾟﾘﾝの制御ﾎﾞﾀﾝ
if(bt2.innerText == "開始" && flg == 0){
pic.style.filter =
"fliph";//右向きに
Toran2();
bt2.innerText = "停止";
flg = 2;
}else if(flg == 2){
bt2.innerText = "開始";
clearTimeout(timer2);
//以下、各値を初期化する
pic.style.pixelTop
= 200;
pic.style.pixelLeft
= 100;
pic.style.filter =
"";
dt = 10;
dl = 4;
t = 15;
n = 7;
flg = 0;
}
}
function Toran2(){
//前後ﾄﾗﾝﾎﾟﾘﾝの実行関数
pic.style.pixelTop -= dt;
pic.style.pixelLeft += dl;
if(pic.style.pixelTop < 50){
dt = -dt;
n = -n;
}else if(pic.style.pixelTop > 200){
dt = -dt;
dl = -dl;
n = -n;
pic.style.filter =
(pic.style.filter ==
"fliph") ? "" : "fliph";
}
t += n;
timer2 = setTimeout("Toran2()",t);
}
//--></script>
</head>
<body>
<img id="pic" style="position:absolute;
top:200;left:100;width:70;height:100"
src="../../java/jadata/pic01.jpg">
<hr style="position:absolute;top:300;
width:80%;height:7;color:green">
<p>上下にﾄﾗﾝﾎﾟﾘﾝ
<button id="bt1" onclick="Start1();">開始</button><br>
前後にﾄﾗﾝﾎﾟﾘﾝ
<button id="bt2" onclick="Start2();">開始</button></p>
end(最終更新:12/11/12)