Jquery click any area of the page to achieve the cross effect of the mouse focus

Focus effects are required in many areas during system development. For example, you can click to focus, map positioning, highlight images, and focus on page elements.
This feature is developed using jquery and graphics to focus on the current click position by clicking any area of the page. It is applicable to the effect of any element on the page.
First introduce jquery engine package: jquery-1.4.2.min.js and graphics. js
Source code
Compile the implementation effect js file, qfocus. js. The source code is as follows:
Copy codeThe Code is as follows:
Var qfocus = {
Config :{
"Bar_dis": true, // display or hide a horizontal or vertical bar
"Circle_dis": true, // hide focus
"Bar_color": "black", // line color
"Circle_color": "red", // circle color
"Rect_color": "green" // color of the square
},
LocationTimer: null, // time control identifier
OnmouseClick: function (ev) {// click the mouse to obtain the focusing effect of the mouse position.
Var point = this. mousePosition (ev );
This. showFocus (point );
},
OnclickElement: function (obj) {// click the mouse to obtain the coordinates for focus
Var _ point = this. elementPosition (obj );
This. showFocus (_ point );
},
ShowFocus: function (point) {// display focus Effect
If (this. locationTimer ){
ClearTimeout (this. locationTimer );
} // Clear the timer
Var mapDiv = "# mapdiv ";
Var _ point = point;
Var canvas = $ ("# canvas ");
Var vLine = $ ("# vline ");
Var hLine = $ ("# hline ");
// Hide or display the focus
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 ");
Paper. clear ();
Var rect = paper. rect (20, 20, 10, 10, 0 );
Rect. attr ("stroke", this. config ["rect_color"]);
Rect. attr ("stroke-width", 1 );
}
// Whether or not the bars are displayed
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 {
Vertex (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 () {// hide the focus Effect
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 (); // focus
$ ("# Vline"). hide (); // horizontal bar
$ ("# Hline"). hide (); // vertical bar
ClearTimeout (this. locationTimer );
},500 );
});
Circle. animate (anim );
} Else {
This. locationTimer = setTimeout (function (){
$ ("# Canvas"). hide (); // focus
$ ("# Vline"). hide (); // horizontal bar
$ ("# Hline"). hide (); // vertical bar
ClearTimeout (this. locationTimer );
},500 );
}

}, MousePosition: function (e ){
Var x, y;
Var e = e | window. event;
Return {
X: e.clientxw.document.body.scrollleft?document.doc umentElement. scrollLeft,
Y: e.clienty?document.body.scrolltop=document.doc umentElement. 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. 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 = postion [0] + (postion [2]-postion [0])/2 );
Var y = postion [1] + (postion [3]-postion [1])/2 );
Return {"x": x, "y": y };
}
}

Html page call source code:
Copy codeThe Code is as follows:
<! 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.4.2.min.js"> </script>
<Script type = "text/javascript" src = "js/graphics. js"> </script>
<Script type = "text/javascript" src = "js/qfocus. js"> </script>
<Title> qfocus </title>
<Script type = "text/javascript">
Function forward (ev ){
Qfocus. onmouseClick (ev );
}
Document. onmousedown = forward;
</Script>
</Head>
<Body>
</Body>
</Html>

Slice: