マウスカーソルを中心にクロスラインを引きます。
Sample
<HTML> <HEAD> <TITLE>Crossline cursor</TITLE> <STYLE TYPE="text/css"> <!-- BODY{ background-color:#000000; } //背景色 .lineStyle{ position:absolute; top:0px; left:0px; width:1px; height:1px; font-size:1px; } --> </STYLE> <SCRIPT TYPE="text/javascript"> <!-- var Col = "red"; //ラインの色 var winx,winy; var sFlag = false; var count = 0; var my = 0; var mx = 0; var lay; var coln; if(document.all){ document.onmousemove = Mmove; } else if(document.layers){ window.captureEvents(Event.MOUSEMOVE); window.onMouseMove = Mmove; } else if(document.getElementById){ document.onmousemove = Mmove; } function Mmove(e){ if(document.all){ mx = event.x; my = event.y; } else if(document.layers){ mx = e.pageX; my = e.pageY; } else if(document.getElementById){ mx = e.pageX; my = e.pageY; } if(mx < 0) mx = 0; if(mx >= winx) mx = winx - 1; if(my < 0) my = 0; if(my >= winy) my = winy - 1; if(sFlag) main(); } function Init(){ winx = GetWindowSize("width"); winy = GetWindowSize("height"); if(document.all){ document.all("iLud").style.backgroundColor = Col; document.all("iLud").style.top = my; document.all("iLud").style.height = winy; document.all("iLlr").style.backgroundColor = Col; document.all("iLlr").style.left = mx; document.all("iLlr").style.width = winx; } else if(document.layers){ document.layers["iLud"].bgColor = Col; document.layers["iLud"].clip.top = my; document.layers["iLud"].clip.left = 0; document.layers["iLud"].clip.right = 1; document.layers["iLud"].clip.bottom = winy; document.layers["iLlr"].bgColor = Col; document.layers["iLlr"].clip.top = 0; document.layers["iLlr"].clip.left = mx; document.layers["iLlr"].clip.right = winx; document.layers["iLlr"].clip.bottom = 1; } else if(document.getElementById){ document.getElementById("iLud").style.backgroundColor = Col; document.getElementById("iLud").style.top = my; document.getElementById("iLud").style.height = winy; document.getElementById("iLlr").style.backgroundColor = Col; document.getElementById("iLlr").style.left = mx; document.getElementById("iLlr").style.width = winx; } sFlag = true; } function main(){ if(document.all){ document.all("iLud").style.left = mx; document.all("iLlr").style.top = my; } else if(document.layers){ document.layers["iLud"].moveTo(mx,0); document.layers["iLlr"].moveTo(0,my); } else if(document.getElementById){ document.getElementById("iLud").style.left = mx; document.getElementById("iLlr").style.top = my; } } //get window size function GetWindowSize(type){ switch(type){ case "width": if(document.all){ return(document.body.clientWidth); } else if(document.layers){ return(innerWidth); } else if(document.getElementById){ return(innerWidth); } else{ return(-1); } break; case "height": if(document.all){ return(document.body.clientHeight); } else if(document.layers){ return(innerHeight); } else if(document.getElementById){ return(innerHeight); } else{ return(-1); } break; default: return(-1); break; } } //--> </SCRIPT> </HEAD> <BODY onLoad="Init()"> <DIV CLASS="lineStyle" ID="iLud"> </DIV> |