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

Source: Internet
Author: User
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:






Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.