<img src="w11.gif" name="0" border="0" style="position:absolute;left:300;
top:100" onMousedown="down('11')"> |
| ↓ | 動作サンプル |
| function down(n){ | down('11')なので、n=11 |
| flag = true; | フラグをtrue |
| namae = n; | nを変数namaeに代入し、namae=11にする |
| h=window.event.offsetY; | w11.gifの上からの位置
| （画像上の位置）
|
| w=window.event.offsetX; | w11.gifの左からの位置 |
| } ←ここまで n の画像上の位置だけを取得するソース |
|
| ↓ |
|
|
|
|
window.document.onmousemove= dragimg; |
| ↓ |
動作サンプル
|
| function dragimg(){ |
onmousemoveでdragimgを読み込む |
| if (!flag) return; | 画像で、なかったら動作なしで戻る |
| document.images[namae].style.top = event.y - h; |
<body>〜</body>の上と左からの画像位置
|
| document.images[namae].style.left = event.x - w; |
| return false; | onmouseupで戻る |
| } ←ここまで画像 n のページ上の画像位置を取得するソース |
|
| images解説 |
詳細
|
|
img要素の[0]から始まるimages配列を自動的に作成
|
| ↓ |
|
|
window.document.onmouseup = up; |
| function up(){ flag = false; }
| マウスアップで、flagをfalseに |
|
|
0.5秒毎に正しい位置に画像移動
|
|
<input type="button" value="完 成" onclick="jikan()"> |
| ↓ |
|
|
|
| ↓ | 動作サンプル
|
| function alignment() { | 0.5秒毎に、読み込み |
| if(i<12){ | 配列位置 i が11までなら |
| namae=i | i を変数namaeに代入 |
| document.images[namae].style.left = xleft[namae]; |
配列の i 番目のnamae画像、left,top位置 |
| document.images[namae].style.top = ytop[namae]; |
| i=i+1 | 0から1づつ加算し11で終わり |
|
位置データの配列
| var xleft=['152','160','140','156','136','165','136','157','135','135','160','167'];
|
| var ytop=['22','26','62','56','90','90','123','120','163','175','174','162'];
|
（例：i が2番目の画像なら、left=xleft['160'] top=ytop['26']
document.images[namae].style.left = 160
document.images[namae].style.left = 26
|
12枚の画像をランダムな位置に再移動
|
| <input type="button" value="シャッフル" onclick="again()"> |
| ↓ | 動作サンプル |
|
|
| ↓ |
|
var randX = Math.floor( Math.random() * 301 ) + 50 ;
var randY = Math.floor( Math.random() * 151 ) + 20 ; | ランダム数値作成 |
| j=j+1 | 0から1づつ11まで加算 |
|
|
