3dhtmlーーマウスダウンとタッチに対応
<html>
<head>
<title></title>
<style type="text/css">
a:link { text-decoration: none; }
b:hover { background-color: #aaaaaa; }
b { text-decoration: none; position: absolute; }
</style>
</head>
<body>
<script type="text/javascript">
var di = 0.8, a = 0, b = 0, aa = 0, bb = 0, aaa = 0, bbb = 0, aaa2 = 0, bbb2 = 0, c = 0, e = 0.05;
var isMouseDown = false; // �}ウスが押されているかどうかを管理するフラグ
var isTouching = false; // タッチがされているかどうかを管理するフラグ
for (i = 0; i < 13; i++) {
document.write('<a href="http://www.google.co.jp"><b id="l' + i + '">' + i + '</b></a>');
}
document.write('<a href="http://www.google.co.jp"><b id="l13"></b></a>');
for (i = 14; i < 27; i++) {
document.write('<a href="http://www.google.co.jp"><b id="l' + i + '">' + i + '</b></a>');
}
function f() {
i = 0;
for (x = -di; x <= di; x += di) {
for (y = -di; y <= di; y += di) {
for (z = -di; z <= di; z += di) {
u = x;
v = y;
w = z;
v2 = v * Math.cos(b) - w * Math.sin(b);
w = v * Math.sin(b) + w * Math.cos(b);
v = v2;
u2 = w * Math.cos(a) - u * Math.sin(a);
w = w * Math.sin(a) + u * Math.cos(a);
u = u2;
c = Math.round((w + 2) * 70);
if (c < 0) { c = 0; }
if (c > 255) { c = 255; }
s = document.getElementById('l' + i).style;
s.left = 300 + u * (w + 2) * 50;
s.top = 250 + v * (w + 2) * 50;
s.color = 'rgb(' + (255 - c) + ', ' + (255 - c) + ',' + (255 - c) + ')';
s.fontSize = (w + 2) * 10 + 'px';
s.zIndex = Math.round((w + 2) * 10);
i++;
}
}
}
}
setInterval('f()', 30);
// �}ウスがクリックされた状態で動くように
document.body.addEventListener('mousedown', function(event) {
isMouseDown = true; // �}ウス�{タンが押された状態
});
// �}ウスのクリックが離された状態にする
document.body.addEventListener('mouseup', function(event) {
isMouseDown = false; // �}ウス�{タンが離された状態
});
// タッチ開始
document.body.addEventListener('touchstart', function(event) {
isTouching = true; // タッチが開始された状態
});
// タッチ終了
document.body.addEventListener('touchend', function(event) {
isTouching = false; // タッチが終了した状態
});
// �}ウスイベント (クリック中のみ動かす)
document.body.addEventListener('mousemove', function(event) {
if (isMouseDown) { // �}ウス�{タンが押されている時だけ動かす
aaa = event.clientX / 999;
a = a + ((aaa - aaa2) < 0) * e - ((aaa2 - aaa) < 0) * e;
aaa2 = aaa;
bbb = event.clientY / 999;
b = b + ((bbb - bbb2) < 0) * e - ((bbb2 - bbb) < 0) * e;
bbb2 = bbb;
}
});
// タッチイベント (タッチ中のみ動かす)
document.body.addEventListener('touchmove', function(event) {
if (isTouching) { // タッチがされている時だけ動かす
event.preventDefault(); // デフォルトの動作を無効にして、スクロールを防ぐ
var touch = event.touches[0];
var touchX = touch.clientX;
var touchY = touch.clientY;
// タッチでの動きに基づいてaとbを更新
aaa = touchX / 999;
a = a + ((aaa - aaa2) < 0) * e - ((aaa2 - aaa) < 0) * e;
aaa2 = aaa;
bbb = touchY / 999;
b = b + ((bbb - bbb2) < 0) * e - ((bbb2 - bbb) < 0) * e;
bbb2 = bbb;
}
});
</script>
</body>
</html>
使用変数
<html>
<head>
<title></title>
<style type="text/css">
a:link { text-decoration: none; }
b:hover { background-color: #aaaaaa; }
b { text-decoration: none; position: absolute; }
</style>
</head>
<body>
<script type="text/javascript">
var di = 0.8, a = 0, b = 0, aa = 0, bb = 0, aaa = 0, bbb = 0, aaa2 = 0, bbb2 = 0, c = 0, e = 0.05;
var isMouseDown = false; // �}ウスが押されているかどうかを管理するフラグ
var isTouching = false; // タッチがされているかどうかを管理するフラグ
for (i = 0; i < 13; i++) {
document.write('<a href="http://www.google.co.jp"><b id="l' + i + '">' + i + '</b></a>');
}
document.write('<a href="http://www.google.co.jp"><b id="l13"></b></a>');
for (i = 14; i < 27; i++) {
document.write('<a href="http://www.google.co.jp"><b id="l' + i + '">' + i + '</b></a>');
}
function f() {
i = 0;
for (x = -di; x <= di; x += di) {
for (y = -di; y <= di; y += di) {
for (z = -di; z <= di; z += di) {
u = x;
v = y;
w = z;
v2 = v * Math.cos(b) - w * Math.sin(b);
w = v * Math.sin(b) + w * Math.cos(b);
v = v2;
u2 = w * Math.cos(a) - u * Math.sin(a);
w = w * Math.sin(a) + u * Math.cos(a);
u = u2;
c = Math.round((w + 2) * 70);
if (c < 0) { c = 0; }
if (c > 255) { c = 255; }
s = document.getElementById('l' + i).style;
s.left = 300 + u * (w + 2) * 50;
s.top = 250 + v * (w + 2) * 50;
s.color = 'rgb(' + (255 - c) + ', ' + (255 - c) + ',' + (255 - c) + ')';
s.fontSize = (w + 2) * 10 + 'px';
s.zIndex = Math.round((w + 2) * 10);
i++;
}
}
}
}
setInterval('f()', 30);
// �}ウスがクリックされた状態で動くように
document.body.addEventListener('mousedown', function(event) {
isMouseDown = true; // �}ウス�{タンが押された状態
});
// �}ウスのクリックが離された状態にする
document.body.addEventListener('mouseup', function(event) {
isMouseDown = false; // �}ウス�{タンが離された状態
});
// タッチ開始
document.body.addEventListener('touchstart', function(event) {
isTouching = true; // タッチが開始された状態
});
// タッチ終了
document.body.addEventListener('touchend', function(event) {
isTouching = false; // タッチが終了した状態
});
// �}ウスイベント (クリック中のみ動かす)
document.body.addEventListener('mousemove', function(event) {
if (isMouseDown) { // �}ウス�{タンが押されている時だけ動かす
aaa = event.clientX / 999;
a = a + ((aaa - aaa2) < 0) * e - ((aaa2 - aaa) < 0) * e;
aaa2 = aaa;
bbb = event.clientY / 999;
b = b + ((bbb - bbb2) < 0) * e - ((bbb2 - bbb) < 0) * e;
bbb2 = bbb;
}
});
// タッチイベント (タッチ中のみ動かす)
document.body.addEventListener('touchmove', function(event) {
if (isTouching) { // タッチがされている時だけ動かす
event.preventDefault(); // デフォルトの動作を無効にして、スクロールを防ぐ
var touch = event.touches[0];
var touchX = touch.clientX;
var touchY = touch.clientY;
// タッチでの動きに基づいてaとbを更新
aaa = touchX / 999;
a = a + ((aaa - aaa2) < 0) * e - ((aaa2 - aaa) < 0) * e;
aaa2 = aaa;
bbb = touchY / 999;
b = b + ((bbb - bbb2) < 0) * e - ((bbb2 - bbb) < 0) * e;
bbb2 = bbb;
}
});
</script>
</body>
</html>
使用変数
| a | |
| aa | |
| aaa2 | |
| aaa | |
| b | |
| bb | |
| bbb2 | |
| bbb | |
| c | |
| color | |
| di | |
| e | |
| event) { if -------( Function ) | |
| event) { isMouseDown = false; // マウスボタンが離された状態 }); // タッチ開始 document.body.addEventListener -------( Function ) | |
| event) { isMouseDown = true; // マウスボタンが押された状態 }); // マウスのクリックが離された状態にする document.body.addEventListener -------( Function ) | |
| event) { isTouching = false; // タッチが終了した状態 }); // マウスイベント -------( Function ) | |
| event) { isTouching = true; // タッチが開始された状態 }); // タッチ終了 document.body.addEventListener -------( Function ) | |
| f -------( Function ) | |
| fontSize | |
| href | |
| i | |
| id | |
| isMouseDown | |
| isTouching | |
| left | |
| s | |
| top | |
| touch | |
| touchX | |
| touchY | |
| type | |
| u2 | |
| u | |
| v2 | |
| v | |
| w | |
| x | |
| y | |
| z | |
| zIndex |