实现鼠标在页面点击出现焦点及大十字星

近段时间，在完成项目进度情况显示时候，用户在操作鼠标时候，显示当鼠标所在位置对应时间如下图所示

代码实现步骤如下：

1.首先引用 jquery.1.7.js

2.再次引用raphael.js

3.然后引用graphics.js

4.最后引用mfocus.js

其中mfocus.js代码如下

var mfocus = {

config: {

"bar_dis": true, //横竖条显示或隐藏

"circle_dis": true, //焦点隐藏

"bar_color": "Yellow", //线条颜色

"circle_color": "red", //圆圈颜色

"rect_color": "green"//方块颜色

},

locationTimer: null, //时间控制标识符

onmouseClick: function (ev) {//鼠标点击获取鼠标位置画聚焦效果

var point = this.mousePosition(ev);

this.showFocus(point);

},

onclickElement: function (obj) {//鼠标点击获取坐标做焦点

var _point = this.elementPosition(obj);

this.showFocus(_point);

},

showFocus: function (point) {//显示焦点效果

if (this.locationTimer) {

clearTimeout(this.locationTimer);

} //清除定时器

var mapDiv = "#mapdiv";

var _point = point;

var canvas = $("#canvas");

var vLine = $("#vline");

var hLine = $("#hline");

//焦点隐藏或显示

if (this.config"circle_dis" == true) {

if (!$("#canvas").attr("id")) {

canvas = '<div id="canvas" style="left:' + (_point.x - 25) + 'px;top:' + (_point.y - 25) + 'px;width:50px;height:50px;overflow:hidden;position:absolute;border:solid 0px red;"/>';

$(canvas).appendTo("body");

} else {

canvas.css("left", (_point.x - 25) + "px");

canvas.css("top", (_point.y - 25) + "px");

canvas.show();

}

paper = Raphael("canvas");//需引用raphael.js

paper.clear();

var rect = paper.rect(20, 20, 10, 10, 0);

rect.attr("stroke", this.config"rect_color");

rect.attr("stroke-width", 1);

}

//是否显示横竖条

if (this.config"bar_dis" == true) {

if (!$("#vline").attr("id")) {

vLine = "<div id='vline' style='background-color:" + this.config"bar_color" + ";height:100%;width:1px;position:absolute;top:0px;left:" + (_point.x) + "px;'/>";

$(vLine).appendTo("body");

} else {

$(vLine).css("left", (_point.x) + "px");

vLine.show();

}

if (!$("#hline").attr("id")) {

var hLine = "<div id='hline' style='overflow:hidden;background-color:" + this.config"bar_color" + ";height:1px;width:100%;position:absolute;left:0px;top:" + (_point.y) + "px;'/>";

$(hLine).appendTo("body");

} else {

$("#hline").css("top", (_point.y) + "px");

hLine.show();

}

}

this.hideFocus();

return true;

}, hideFocus: function () {//隐藏焦点效果

if (paper != null) {

var circle = paper.circle(25, 25, 30);

circle.attr("stroke", this.config"circle_color");

circle.attr("stroke-width", 1);

var anim = Raphael.animation({

r: 5

}, 900, null, function () {

this.locationTimer = setTimeout(function () {

$("#canvas").hide(); //焦点

$("#vline").hide(); //横条

$("#hline").hide(); //竖条

clearTimeout(this.locationTimer);

}, 500);

});

circle.animate(anim);

} else {

this.locationTimer = setTimeout(function () {

$("#canvas").hide(); //焦点

$("#vline").hide(); //横条

$("#hline").hide(); //竖条

clearTimeout(this.locationTimer);

}, 500);

}

}, mousePosition: function (e) {

var x, y;

var e = e || window.event;

return {

x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,

y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop

}

}, elementPosition: function (oElement) {

var x2 = 0;

var y2 = 0;

var width = oElement.offsetWidth;

var height = oElement.offsetHeight;

var postion = "";

if (typeof (oElement.offsetParent) != 'undefined') {

for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {

posX += oElement.offsetLeft;

posY += oElement.offsetTop;

}

x2 = posX + width;

y2 = posY + height;

postion = posX, posY, x2, y2;

} else {

x2 = oElement.x + width;

y2 = oElement.y + height;

postion = oElement.x, oElement.y, x2, y2;

}

var x = postion0 + ((postion2 - postion0) / 2);

var y = postion1 + ((postion3 - postion1) / 2);

return { "x": x, "y": y };

}

}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.1.7.js"></script>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/graphics.js"></script>
<script type="text/javascript" src="js/mfocus.js"></script>
<title>qfocus</title>
<script type="text/javascript">
function forward(ev){ 
	mfocus.onmouseClick(ev);
}
document.οnmοusedοwn=forward;
</script>
</head>
<body>
</body>
</html>