<!DOCTYPE HTML>
<HTML LANG="ja">
<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>xeyes もどき 其の二（スタイルシート版）</TITLE>
</HEAD>
<BODY STYLE="background-color:#CCFFFF; user-select:none">
<BR><BR>
<DIV STYLE="text-align:center">
<B><SPAN STYLE="color:#CC0000; font-size:larger">xeyes もどき 其の二（スタイルシート版）</SPAN></B>
</DIV>
<DIV ID="rect" STYLE="position:absolute; width:252px; height:160px">
<DIV ID="eye0" STYLE="position:absolute; left:0; top:0; width:120px; height:160px; background-image:radial-gradient(ellipse closest-side at center, white 0% 79%, black 81% 99%, transparent 101%); pointer-events:none"></DIV>
<DIV ID="eye1" STYLE="position:absolute; left:132px; top:0; width:120px; height:160px; background-image:radial-gradient(ellipse closest-side at center, white 0% 79%, black 81% 99%, transparent 101%); pointer-events:none"></DIV>
<DIV ID="iris0" STYLE="position:absolute; left:50px; top:67px; width:20px; height:27px; background-color:black; clip-path:ellipse(50% 50% at 50% 50%); pointer-events:none"></DIV>
<DIV ID="iris1" STYLE="position:absolute; left:182px; top:67px; width:20px; height:27px; background-color:black; clip-path:ellipse(50% 50% at 50% 50%); pointer-events:none"></DIV>
<DIV ID="hg" STYLE="position:absolute; left:0; top:0; width:0; height:0; visibility:hidden">
<DIV ID="h0" STYLE="position:absolute; left:-3px; top:-3px; width:6px; height:6px; background-color:#804040; cursor:nw-resize"></DIV>
<DIV ID="h1" STYLE="position:absolute; left:123px; top:-3px; width:6px; height:6px; background-color:#804040; cursor:n-resize" ></DIV>
<DIV ID="h2" STYLE="position:absolute; left:249px; top:-3px; width:6px; height:6px; background-color:#804040; cursor:ne-resize"></DIV>
<DIV ID="h3" STYLE="position:absolute; left:-3px; top:77px; width:6px; height:6px; background-color:#804040; cursor:w-resize" ></DIV>
<DIV ID="h4" STYLE="position:absolute; left:249px; top:77px; width:6px; height:6px; background-color:#804040; cursor:e-resize" ></DIV>
<DIV ID="h5" STYLE="position:absolute; left:-3px; top:157px; width:6px; height:6px; background-color:#804040; cursor:sw-resize"></DIV>
<DIV ID="h6" STYLE="position:absolute; left:123px; top:157px; width:6px; height:6px; background-color:#804040; cursor:s-resize" ></DIV>
<DIV ID="h7" STYLE="position:absolute; left:249px; top:157px; width:6px; height:6px; background-color:#804040; cursor:se-resize"></DIV>
</DIV>
</DIV>
<SCRIPT TYPE="text/javascript">
<!--
function down(e) {
if(e.button == 0) { // 左ボタン
// ハンドル上？
if(e.target.parentElement == elem_hg) {
elem_h = e.target;
// サイズ変更開始
st_x = e.pageX;
st_y = e.pageY;
old_x = rect_x;
old_y = rect_y;
old_w = rect_w;
old_h = eye_h;
document.documentElement.style.cursor = elem_h.style.cursor; // カーソル イメージ固定
tracking = 2;
return;
}
// ハンドル消去
elem_hg.style.visibility = "hidden";
if(e.target == elem_rect) { // 目の矩形領域内
// 移動開始
off_x = e.pageX - rect_x;
off_y = e.pageY - rect_y;
tracking = 1;
return;
}
tracking = 0;
}
}
function up(e) {
if(e.button == 0) { // 左ボタン
switch(tracking) {
case 1: // 移動中
// ハンドル表示
elem_hg.style.visibility = "visible";
tracking = 0;
break;
case 2: // サイズ変更中
document.documentElement.style.cursor = "auto"; // カーソル イメージ復旧
tracking = 0;
break;
}
}
}
function move(e) {
var max;
switch(tracking) {
case 1: // 移動中
rect_x = e.pageX - off_x;
if(rect_x < 3) {
rect_x = 3;
}
else {
max = innerWidth - 3;
if(rect_x + rect_w > max)
rect_x = (max - rect_w > 3) ? max - rect_w : 3;
}
rect_y = e.pageY - off_y;
if(rect_y < 3) {
rect_y = 3;
}
else {
max = innerHeight - 3;
if(rect_y + eye_h > max)
rect_y = (max - eye_h > 3) ? max - eye_h : 3;
}
elem_rect.style.left = String(rect_x) + "px";
elem_rect.style.top = String(rect_y) + "px";
return;
case 2: // サイズ変更中
var dx = e.pageX - st_x;
var dy = e.pageY - st_y;
switch(elem_h) {
case elem_h0: // 左上
case elem_h3: // 左中
case elem_h5: // 左下
if((rect_w = old_w - dx) < 6) {
rect_x = old_x + old_w - 6;
rect_w = 6;
}
else {
if((rect_x = old_x + dx) < 3) {
rect_x = 3;
rect_w = old_x + old_w - 3;
}
}
elem_rect.style.left = String(rect_x) + "px";
break;
case elem_h2: // 右上
case elem_h4: // 右中
case elem_h7: // 右下
if((rect_w = old_w + dx) < 6) {
rect_w = 6;
}
else {
max = innerWidth - 3;
if(rect_x + rect_w > max)
rect_w = max - rect_x;
}
break;
}
switch(elem_h) {
case elem_h0: // 左上
case elem_h1: // 中上
case elem_h2: // 右上
if((eye_h = old_h - dy) < 6) {
rect_y = old_y + old_h - 6;
eye_h = 6;
}
else {
if((rect_y = old_y + dy) < 3) {
rect_y = 3;
eye_h = old_y + old_h - 3;
}
}
elem_rect.style.top = String(rect_y) + "px";
break;
case elem_h5: // 左下
case elem_h6: // 中下
case elem_h7: // 右下
if((eye_h = old_h + dy) < 6) {
eye_h = 6;
}
else {
max = innerHeight - 3;
if(rect_y + eye_h > max)
eye_h = max - rect_y;
}
break;
}
elem_rect.style.width = String(rect_w) + "px";
elem_rect.style.height = String(eye_h) + "px";
// 目玉
eye_w = Math.round(rect_w * 10 / 21);
elem_eye0.style.width = elem_eye1.style.width = String(eye_w) + "px";
elem_eye0.style.height = elem_eye1.style.height = String(eye_h) + "px";
elem_eye1.style.left = String(rect_w - eye_w) + "px";
// 黒目
iris_w = Math.round(eye_w / 6);
iris_h = Math.round(eye_h / 6);
elem_iris0.style.width = elem_iris1.style.width = String(iris_w) + "px";
elem_iris0.style.height = elem_iris1.style.height = String(iris_h) + "px";
// ハンドル
elem_h1.style.left = elem_h6.style.left = String((rect_w >> 1) - 3) + "px";
elem_h2.style.left = elem_h4.style.left = elem_h7.style.left = String(rect_w - 3) + "px";
elem_h3.style.top = elem_h4.style.top = String((eye_h >> 1) - 3) + "px";
elem_h5.style.top = elem_h6.style.top = elem_h7.style.top = String(eye_h - 3) + "px";
bounds = eye_w * eye_h * 5 / 18;
break;
}
var x = (e.pageX - (elem_rect.offsetLeft + eye_w / 2)) * eye_h;
var y = (e.pageY - (elem_rect.offsetTop + eye_h / 2)) * eye_w;
for(var f = false; ; ) {
var d = Math.sqrt(x * x + y * y);
var x2, y2;
if(d > bounds) { // マウスは目玉の外
x2 = x * bounds / d;
y2 = y * bounds / d;
}
else {
x2 = x;
y2 = y;
}
x2 = Math.round(Math.abs(x2) / eye_h);
if(x < 0)
x2 = - x2;
y2 = Math.round(Math.abs(y2) / eye_w);
if(y < 0)
y2 = - y2;
if(f) { // 左目
elem_iris1.style.left = String(rect_w - (eye_w >> 1) - (iris_w >> 1) + x2) + "px";
elem_iris1.style.top = String((eye_h >> 1) - (iris_h >> 1) + y2) + "px";
break;
}
else {
elem_iris0.style.left = String((eye_w >> 1) - (iris_w >> 1) + x2) + "px";
elem_iris0.style.top = String((eye_h >> 1) - (iris_h >> 1) + y2) + "px";
x = (e.pageX - (elem_rect.offsetLeft + rect_w - eye_w / 2)) * eye_h;
f = true;
}
}
}
rect_w = 252;
eye_w = 120;
eye_h = 160;
iris_w = 20;
iris_h = 27;
bounds = 120 * 160 * 5 / 18;
elem_rect = document.getElementById("rect");
elem_eye0 = document.getElementById("eye0");
elem_eye1 = document.getElementById("eye1");
elem_iris0 = document.getElementById("iris0");
elem_iris1 = document.getElementById("iris1");
elem_hg = document.getElementById("hg");
elem_h0 = document.getElementById("h0");
elem_h1 = document.getElementById("h1");
elem_h2 = document.getElementById("h2");
elem_h3 = document.getElementById("h3");
elem_h4 = document.getElementById("h4");
elem_h5 = document.getElementById("h5");
elem_h6 = document.getElementById("h6");
elem_h7 = document.getElementById("h7");
elem_rect.style.left = String(rect_x = (innerWidth > 258) ? 3 + ((innerWidth - 258) >> 1) : 3) + "px";
elem_rect.style.top = String(rect_y = (innerHeight > 166) ? 3 + ((innerHeight - 166) >> 1) : 3) + "px";
tracking = 0;
onmousedown = down;
onmouseup = up;
onmousemove = move;
//-->
</SCRIPT>
</BODY>
</HTML>
|
