JavaScriptでサイコロのようなものを作成しています。
スタートボタンで"数字の画像"(diceX.gif)が順に入れ替わって、ストップボタンで止まる、というものなのですが、
この画像数字の入れ替わる範囲を"1-2の間で、1-3の間で・・・"というように変化させたく思っています。
現状は下記のように別々に並べて画像、スタート.ストップが表示されるよういなっていまが、
これをセレクトメニューで「2」を選択した場合は1-2の、「3」を選択した場合には1-3..の間での変化と
1つの画像、ボタン表示で済むようにしたいのですが、どのように記述すればよいのでしょうか?
こういったものを作成するのは初めてで、様々なサイトを参考になんとかここまでこぎ着けましたがどうにも行き詰まってしまいました
なにとぞ宜しくお願いいたします。
<SCRIPT LANGUAGE="JavaScript">
<!--
var myImage1 = new Image(); myImage1.src = "dice1.gif";
var myImage2 = new Image(); myImage2.src = "dice2.gif";
var myImage3 = new Image(); myImage3.src = "dice3.gif";
・
・
・
var img =0;
fileName = new Array("dice1.gif","dice2.gif","dice3.gif",・・・);
function rotate2() {
img = Math.floor(Math.random()*2);
document.images["dice2"].src = fileName[img];
timer = setTimeout("rotate2()",30);
}
function stop2() {
clearTimeout(timer);
}
function rotate3() {
img = Math.floor(Math.random()*3);
document.images["dice3"].src = fileName[img];
timer = setTimeout("rotate3()",30);
}
function stop3() {
clearTimeout(timer);
}
・
・
・
</SCRIPT>
<BODY>
<IMG src="dice2.gif" name="dice2">
<FORM action="javascript://">
<INPUT TYPE="submit" VALUE="start" onClick="rotate2()">
<INPUT TYPE="submit" VALUE="stop" onClick="stop2()">
</FORM>
<IMG src="dice3.gif" name="dice3">
<FORM action="javascript://">
<INPUT TYPE="submit" VALUE="start" onClick="rotate3()">
<INPUT TYPE="submit" VALUE="stop" onClick="stop3()">
</FORM>
・
・
・
No.9ベストアンサー
- 回答日時:
#4様のように、楽しい動きはしませんが、ご質問にかなり近いもののつもり。
speedの数値を変えれば、速度が変わります。(例では 100msec)
<div id="diece">の中の<img>群が切り替え表示の対象です。
(画像は#2様のご指摘のように、1枚の画像で行った方が良いように思いますが、ご質問文はそれぞれになっているのでとりあえずそのまま。)
<html>
<head>
<style type="text/css">
.sel {float:left; padding-right:2em; }
#dice { float:left; color:red; text-align: center;}
#dice img { margin:0 auto 1em; }
</style>
<script type="text/javascript">
window.onload = function() { rotation.init(); }
var rotation = {
max:1, tmax:1, nmbr:0, flag:false, img:[], speed:100,
init:function(){
this.img = document.getElementById('dice').getElementsByTagName('IMG');
this.max = this.img.length; this.tmax = this.max;
for (var i=0; i<this.max; i++){
this.img[i].style.display = (i==this.nmbr)?'block':'none';
}
},
start:function(f) {
if (!this.flag) {
var n = f.form.elements['type'].value;
if (n) {
n = parseInt(n); if (n>this.max) n = this.max;
this.tmax = n; this.flag = true; this.disp();
} else { this.flag = false; }
}
},
stop:function() { this.flag = false; },
disp:function() {
var n = this.nmbr;
while (n == this.nmbr) n = Math.floor(Math.random()*this.tmax);
this.img[this.nmbr].style.display = 'none';
this.img[n].style.display = 'block';
this.nmbr = n;
if (this.flag) setTimeout("rotation.disp()", this.speed);
}
}
</script>
</head>
<body>
<form>
<div class="sel">
<select name="type" id="type">
<option value="">選択してください
<option value="2">2面サイコロ
<option value="3">3面サイコロ
<option value="4">4面サイコロ
<option value="5">5面サイコロ
<option value="6">6面サイコロ
</select>
</div>
<div id="dice">
<img src="dice1.gif">
<img src="dice2.gif">
<img src="dice3.gif">
<img src="dice4.gif">
<img src="dice5.gif">
<img src="dice6.gif">
<input type="button" value=" start " onclick="rotation.start(this);">
<input type="button" value=" stop " onclick="rotation.stop();">
</div>
</form>
</body>
</html>
No.8
- 回答日時:
yyr446さん!ごしてき、ありがとうございま~す!^^;
げんいんは、しょうすうをきりすてにするために |0 を
つかってましたが、ちゃんと()でくくってないためでした。
ちゃんとparseIntつかえばいいものを・・・・。と、ひとりつっこみ。
Slot.prototype.start = (function ( sin ) {
return function ( m ) {
if( !m ) this.eflag = 0;
var c, x0, x1, s;
for( c = 0; c < this.n; c++) {
x0 = this.r * sin( this.k[c] );
x1 = this.r * sin( this.k[c] + this.t) + 1;
s = this.img[c].style;
if( x0 < x1 ) {
s.left = ((this.r + x0)|0) + 'px';
s.width= Math.abs((x1-x0)|0) + 'px';
s.zIndex = 1 + '';
} else {
s.left = ((this.r + x1)|0) + 'px';
s.width= Math.abs((x0-x1)|0) + 'px';
s.zIndex = 0 + '';
}
this.k[c] += this.step;
}
if( this.eflag == 1) {
this.step-=.2;
if( this.step < 0) {
this.eflag = 2;
this.step = this.bstep;
}
}
if( this.eflag == 2) return;
setTimeout( (function (that) { return function () { that.start(1); }; })( this ), this.interval );
};
})( Math2.sin );
No.6
- 回答日時:
当事者でないので、原因究明と修正を頼むわけでもありませんが
気づいたもので...
babu_babooさんのサンプルIEだとかっこいいですが、
Firefox(3.5)だとぶさいくです。
なぜか、Firefoxだと
this.img[c].style.leftの値がうまく設定されてないようで、
画像は変わりますが、左端で伸び縮みしているだけです。
IEだと真ん中でぐるぐる回っているような視覚効果が出てます。
No.5
- 回答日時:
>・ドラム回転のためにいわゆる目押しが出来てしまう
スピードをはやくすれば?
>・回転している間に他の数字が見えてしまう
みえるはんいを、小さくすれば?
>・数字画像が定位置で止まらない
いまは、なおすこんじょうがないよ
じぶんのべんきょうのためにかいたものだし
きたいされても・・・・・。
まるなげなんだし、きぼうのかいとうがつくまで、
まってみたら?あちこちできいてるみたいだし。
No.4
- 回答日時:
♪さいころのようでさいころでない。
べんべん。♪すろっとのようですろっとでない。べんべん。
こうはんはつかれて、いつものように、ぐだぐだになってしまいました。^^;
ぜんかくくうはくは、はんかくになおしてちょ!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Images</title>
<style type="text/css">
#waku0 { overflow:auto; width:600px; height:90px; border:1px red solid;}
#waku0 img { border:0px none; width:120px; height:90px; }
</style>
<div id="waku0">
<img src="./img/0.gif" alt="Image0">
<img src="./img/1.gif" alt="Image1">
<img src="./img/2.gif" alt="Image2">
<img src="./img/3.gif" alt="Image3">
<img src="./img/4.gif" alt="Image4">
<img src="./img/5.gif" alt="Image5">
<img src="./img/6.gif" alt="Image6">
<img src="./img/7.gif" alt="Image7">
<img src="./img/8.gif" alt="Image8">
<img src="./img/9.gif" alt="Image9">
</div>
<p>
<select id="a" onchange="if(p.eflag==2) { p = new Slot('waku0', 5, 30, +this.value); }">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<input type="button" value="start" onclick="if(p.eflag == 2)p.start()"> /
<input type="button" value="stop" onclick="p.stop()">
</p>
<script type="text/javascript">
var Math2 = new function ( ) {
var sinTable = [ ];
var cosTable = [ ];
var i, t;
for( i = 0; i < 720; i++ ) {
t = i * Math.PI / 180;
sinTable[ i ] = Math.sin( t );
cosTable[ i ] = Math.cos( t );
}
this.sin = function ( deg ) {
return sinTable[ (360 + deg % 360) |0 ];
};
this.cos = function ( deg ) {
return cosTable[ (360 + deg % 360) |0 ];
};
};
var Slot = function ( ) {
this.init.apply( this, arguments );
};
Slot.prototype.init = function ( pid, step, interval, face ) {
if( !( this.e = document.getElementById( pid ) ) ) return null;
var c, o;
this.e.style.overflow = 'hidden';
this.e.style.position = 'relative';
this.img = this.e.getElementsByTagName( 'IMG' );
this.r = this.e.offsetWidth / 2;
this.n = face || this.img.length;
this.t = 360 / this.n;
this.k = [ ];
this.step = step;
this.bstep = step;
this.interval = interval;
this.eflag = 2;
for( c = 0; o = this.img[ c ]; c++) {
this.k[c] = this.t * c;
o.style.position = 'absolute';
o.style.visibility = c < this.n ? 'visible': 'hidden';
}
this.start(1);
return true;
};
Slot.prototype.start = (function ( sin ) {
return function ( m ) {
if( !m ) this.eflag = 0;
var c, x0, x1, s;
for( c = 0; c < this.n; c++) {
x0 = this.r * sin( this.k[c] );
x1 = this.r * sin( this.k[c] + this.t) + 1;
s = this.img[c].style;
if( x0 < x1 ) {
s.left = (this.r + x0)|0 + 'px';
s.width= Math.abs((x1-x0)|0) + 'px';
s.zIndex = 1 + '';
} else {
s.left = (this.r + x1)|0 + 'px';
s.width= Math.abs((x0-x1)|0) + 'px';
s.zIndex = 0 + '';
}
this.k[c] += this.step;
}
if( this.eflag == 1) {
this.step-=.2;
if( this.step < 0) {
this.eflag = 2;
this.step = this.bstep;
}
}
if( this.eflag == 2) return;
setTimeout( (function (that) { return function () { that.start(1); }; })( this ), this.interval );
};
})( Math2.sin );
Slot.prototype.stop = (function ( ) {
return function ( ) {
this.eflag = 1;
};
})();
var p = new Slot('waku0', 5, 20,+document.getElementById('a').value)
</script>
この回答への補足
早速のご返答ありがとうございます
試用してみましたが、非常におもしろい動きで見た目にも楽しめるものでした。
セレクトメニューによる切り替えも正に求めている動作でした
しかしながら、
・ドラム回転のためにいわゆる目押しが出来てしまう
・回転している間に他の数字が見えてしまう
・数字画像が定位置で止まらない
という点においては求めるものではありませんでした
折角、ご回答下さったにも関わらず私の説明不足もあり、申し訳ありません
もしできましたら、お手すきの際にでも元の挙動のままでセレクトメニューに
対応させて頂くことは出来ませんでしょうか?
今回、お書き頂いたものは大切に保存させて頂き、また機会があれば
使わせて頂こうと思います。
No.3
- 回答日時:
【補記】selectのvalueは文字だから
var n=Math.floor(Math.random()*parseInt(parm));
でした。(掛け算で勝手に変換されてるかも)
No.2
- 回答日時:
style clipは問題ありそうです。
よく条件を吟味してませんが、ヒントとしては、
縦横100px×100pxの画像10枚を縦につなげて
1000px×100pの1枚の画像all.gifにしておいて、
<div>と<img>を組み合わせて
<div id="all_gazou" style="width:100px; height: 100px;overflow:hidden;z-index:99;">
<img src="all.gif" />
</div>
と表示させておいて。
画像表示位置をn(0-9)の値によって
document.getElementById("all_gazou").childNodes[0].style.top = (n * -100) + "px";
とする。
nは、parmによって
function hoge(parm){
var n=Math.floor(Math.random()*parm);
document.getElementById("all_gazou").childNodes[0].style.top = (n * -100) + "px";
}
parmは選択させて
<select onchange="javascript:hoge(this.value);">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
-------
</select>
ですかねえ
fujillin様も仰られていることから"画像を1枚にすること"は有用なことなのだとは思いますが、今の私ではその有用性を理解することが出来ません。
fujillin様のものにyyr446様のご回答を併せて勉強し、今後なんとか自力で
画像一枚で処理できるようにしてみたいと思います
この度はありがとうございました。
No.1
- 回答日時:
セレクトメニューとボタンについてはおいといて、
1つの画像で実現する方法ですが、
複数の画像を縦又は横に連結して1枚の画像としておいて、
その画像を表示する時のstyle属性ののclipを使って表示したい部分だけ
切り取って表示してしまうのはいかがでしょう。
<img src="all.gif" id="all_gazou" >
val='rect(上端,右端,下端,左端)'
document.getElementById("all_gazou").style.position = 'absolute';
document.getElementById("all_gazou").style.clip=val;
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
吹き出しに画像とコメントを入...
-
サムネイルにカーソルを合わせ...
-
JavaScript - 月ごとに画像変化
-
画像が表示でnull; this.src
-
VideoBoxのカスタマイズ
-
textareaに画像を表示したい
-
jQueryを使ってランダムに表示
-
「jQuery」アコーディオンメニ...
-
MAX関数を使ってからLEFT JOIN...
-
画像とコメントの同時表示をし...
-
スクロール可能なチェックボックス
-
画像の入れ替え
-
クリックすると下に説明文が出...
-
フッター上部に謎の隙間
-
htmlの記述で link rel=styles...
-
MFCで画像を表示させているので...
-
テーブル幅を自動で画像幅にし...
-
外部ファイルにしたら文字化け...
-
マウスオーバーで他の2個の画像...
-
jquery 3の倍数のliだけ色を変える
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
Javascript初心者|jQueryの.va...
-
jqueryで、後から追加した画像...
-
デフォルト非表示にしたい。【t...
-
bxsliderで最初に縦に複数表示...
-
交互に入れ替わる画像を複数配置
-
クリッカブルマップをロールオ...
-
背景色と連動するスライドショ...
-
JS:画像を繰り返しランダム読...
-
画像のサイズ
-
スクリプト
-
アップロードファイルの種類に...
-
クリックでクリッカブルマップ...
-
マウスオーバーにて画像に虫眼...
-
java スライド クリック メニ...
-
VBAでIEを動かす場合、下記の①...
-
JavaScriptでの画像切り替えを...
-
【jQuery】setInterval
-
IEの「explorercanvas」で作っ...
おすすめ情報