Click focus, map positioning, highlight on images, and focus on positioning page elements, which are frequently used in system development. The following describes the specific implementation, if you are interested, you can refer to the Focal Point effects required in many areas during system development. For example, you can click the mouse to focus, map positioning, highlight the image, and focus on the 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:
The 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 = "# mapp ";
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 ='
';
$ (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 ="
";
$ (VLine). appendTo ("body ");
} Else {
Vertex (vline).css ("left", (_ point. x) + "px ");
VLine. show ();
}
If (! $ ("# Hline"). attr ("id ")){
Var hLine ="
";
$ (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:
The Code is as follows:
