by sandai
2010-05-18 [2010/05/18 01:20:50]
透けてます。ctrlキーで透けません。http://d.hatena.ne.jp/sandai/20100518/p1
@@ -1,6 +1,6 @@ /* * @title マウス座標を取得していちいち表示し続ける- * @description 透けてます。ctrlキーで透けません。+ * @description 透けてます。ctrlキーで透けません。http://d.hatena.ne.jp/sandai/20100518/p1 * @include http://* * @license MIT License * @require
/*
* @title マウス座標を取得していちいち表示し続ける
* @description 透けてます。ctrlキーで透けません。http://d.hatena.ne.jp/sandai/20100518/p1
* @include http://*
* @license MIT License
* @require
*/
(function() {
var target = relatedTarget = null;
var change = 1;
var coordinate = Array(4), div = Array(4);
var cwidth = window.innerWidth || document.documentElement.offsetWidth,
cheight = window.innerHeight || document.documentElement.offsetHeight;
var box = document.createElement('div');
box.id = 'broCoordinate';
box.style.backgroundColor = '#ff4500';
box.style.color = 'white';
box.style.position = 'absolute';
box.style.filter = 'alpha(opacity=70)';
box.style.opacity = '0.7';
box.style.whiteSpace = 'nowrap';
box.style.zIndex = '10000';
for(var i = 0; i < div.length; i++) {
div[i] = document.createElement('div');
div[i].style.margin = '0 3px';
div[i].style.textAlign = 'left';
box.appendChild(div[i]);
}
document.body.appendChild(box);
document.onmousemove = function(e) {
coordinate[0] = [((e)?e.clientX:window.event.clientX),((e)?e.clientY:window.event.clientY)];
coordinate[1] = [((e)?e.pageX:window.event.clientX+document.documentElement.scrollLeft),((e)?e.pageY:window.event.clientY+document.documentElement.scrollTop)];
coordinate[2] = [((window.event)?window.event.offsetX:e.layerX),((window.event)?window.event.offsetY:e.layerY)];
coordinate[3] = [((e)?e.screenX:window.event.screenX),((e)?e.screenY:window.event.screenY)]
div[0].innerHTML = 'clientX: ' + coordinate[0][0] + ', ' + 'clientY: ' + coordinate[0][1];
div[1].innerHTML = 'pageX: ' + coordinate[1][0] + ', ' + 'pageY: ' + coordinate[1][1];
div[2].innerHTML = 'offsetX: ' + coordinate[2][0] + ', ' + 'offsetY: ' + coordinate[2][1];
div[3].innerHTML = 'screenX: ' + coordinate[3][0] + ', ' + 'screenY: ' + coordinate[3][1];
box.style.left = coordinate[1][0] + 10 + 'px';
box.style.top = coordinate[1][1] + 10 + 'px';
var boxWidth = box.scrollWidth, boxHeight = box.scrollHeight;
if((cwidth - boxWidth) < (coordinate[0][0] + 40)) {
box.style.left = coordinate[1][0] - boxWidth - 5 + 'px';
}
if((cheight - boxHeight) < (coordinate[0][1] + 40)) {
box.style.top = coordinate[1][1] - boxHeight - 5 + 'px';
}
target = ((e)? e.target : window.event.srcElement);
if(target){
if(!relatedTarget) {
target.style.outline = 'blue 2px solid';
relatedTarget = target;
}
if(target != relatedTarget) {
relatedTarget.style.outline = '';
relatedTarget = null;
}
}
};
document.onkeydown = function(e) {
var ctrlKey = (e)? e.ctrlKey : window.event.ctrlKey;
if(ctrlKey && change == 1) {
box.style.filter = 'alpha(opacity=100)';
box.style.opacity = '1';
cancel(e);
} else if(ctrlKey && change == 2) {
box.style.filter = 'alpha(opacity=70)';
box.style.opacity = '0.7';
cancel(e);
}
function cancel(evt) {
change = 3 - change;
if(evt != undefined) {
e.preventDefault();
e.stopPropagation();
} else {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
}
};
})();