JavaScriptで、マウスに合わせて動くスポットライトを作ってみました。

JavaScriptで、マウスに合わせて動くスポットライトを作りました。 ボタンをクリックするとスポットライトがon/offになります。

↓以下が実際のソースサンプルです。

▼JavaScript

<script type="text/javascript">
var iro=new Array("#000","#050","#00f");
var chokkei=250;
var futosa=100;

var hanni=chokkei+"px", waku=futosa+"px", vis=true;
var irosettei=iro[Math.floor(Math.random()*iro.length)];
document.onmousemove=function (e){
var chushin=chokkei/2+futosa;
Spotlight.style.left=e.pageX-chushin+"px"; Spotlight.style.top=e.pageY-chushin+"px"; 
}
function onoff(){
if (vis){ vis=false; sousa.value="スポットライトOn"; Spotlight.style.opacity=0; document.onmousemove=null;}
else{location.reload();}
}
document.write('<div id="Spotlight" style="position: absolute; top: -500px; left: -500px; width: '+hanni+'; height: '+hanni+'; border: solid '+waku+' '+irosettei+'; border-radius: 50%; z-index: 200;">'); 
document.write('<div id="wakuB" style="position:absolute;top:0;left:0; width:'+hanni+';height:'+hanni+'; outline:solid 2000px '+irosettei+';"></div></div>');
</script>

▼CSS

<style type="text/css">

body{
backgroundcolor:#fff;
color:#000;}

#Spotlight{
opacity:0.9;
transition:opacity 2s ease-out;}

#sousa{
position:fixed;
top:100px; left:30px;
z-index:201;}

p {
text-align:center;}
</style>

▼HTML

<input type="button" value="スポットライトOff" onclick="onoff();" title="on/off" id="sousa">
<div style="margin:200px 10%;background:#d03; border:solid 5px #600;padding:20px;">
<p>スポットライトon時の色はランダムで3色に変わります。</p>
</div>

今回、参考にさせていただいたのは、『動くJavaScript』さんのサイトです

「動くJavaScript」さんのサイトはこちら

デモページは、こちら