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』さんのサイトです
