SHOJI's Code
 仕事や趣味で書いた各種言語のプログラミングコード(エクセルVBA,PHP,C/C++/C#,JavaScript等)、その他雑記。
2018.07<<12345678910111213141516171819202122232425262728293031>>2018.09
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

MacのDockみたいなものをちょっと作ってみた。
<html>
<head>
<style type="text/css">
body {
font-size: 10px;
}
.wrapper {
text-align: center;
width: 100%;
overflow: hidden;
}

.box {
display: inline;
margin: 5px;
width: 50px;
height: 50px;
border: 1px solid black;
overflow: hidden;
}
</style>

<script type="text/javascript">
function load()
{
document.onmousemove = check;

for(var i=0;i<document.all.length;i++)
if( document.all(i).className == "box" )
{
document.all(i).onclick = set_red;
document.all(i).onmouseout = set_white;
}
}

function check()
{
var mx = event.clientX;
var my = event.clientY;
document.getElementById("cursor").innerHTML = mx + "," + my;

for(var i=0;i<document.all.length;i++)
if( document.all(i).className == "box" )
{
var o = document.all(i);
var x = o.offsetLeft + o.offsetWidth / 2;
var y = o.offsetTop + o.offsetHeight / 2;
var l = Math.sqrt( Math.abs(x - mx)*Math.abs(x - mx) + Math.abs(y - my)*Math.abs(y - my) );
var w;
o.innerHTML = x + "," + y + "<br/>"
+ Math.abs(x - mx) + "," + Math.abs(y - my) + "<br/>"
+ l;

var l_max = 200;
var l_min = 10;

var max = 100;
var min = 50;

if( l < l_min ) w = max; else if( l > l_max ) w = min; else w = (l_max-l)*(max - min)/l_max + min;
o.style.width = w + "px";
o.style.height = w + "px";
}
}

function set_red()
{
this.style.backgroundColor = "red";
}
function set_white()
{
this.style.backgroundColor = "white";
}

</script>

</head>
<body onload="load();">
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<div id="cursor"></div>

</div>
</body>
</html>


多分IEしか動かないし、いろいろと怪しいが、まぁ、お遊びということで(^^;

テーマ:JavaScript(ジャバスクリプト) - ジャンル:コンピュータ
コメント
この記事へのコメント
コメントを投稿する

管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2004-2006 SHOJI, Powered By FC2ブログ all rights reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。