jquery點擊頁面任何區域實現滑鼠焦點十字效果_jquery

系統開發時很多地方需要有焦點效果，例如：滑鼠點擊聚焦，地圖定位，在圖片上突出顯示，焦點定位頁面元素。
本小功能透過jquery和graphics二次開發，實現透過滑鼠點擊頁面任何區域，聚焦目前點擊位置。適用於頁面任何元素的位置效果。
首先引入jquery引擎包:jquery-1.4.2.min.js和graphics.js
源碼下載地址
寫實作效果js文件，qfocus.js,源碼如下：

複製程式碼 程式碼如下:

var qfocus = {
config: >"bar_dis":true,//橫直條顯示或隱藏
"circle_dis":true,//焦點隱藏
"bar_color":"black",//線條顏色
"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 = '

';
$(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);
}
//是否顯示橫豎條
if (this.config["bar_dis"] == true) {
if (!$("#vline").attr("id")) {
vLine = "

";
$(vLine).appendTo("body");
} else {
$(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() {//隱藏焦點效果
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.docTop.
}
},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; oElementpos; oElement = oElement.off ) {
posX = oElement.offsetLeft;
posY = oElement.offsetTop;
}
x2 = posX width;
y2 = posY height;
postion = posX, postion = [ posX ） 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頁面調用源碼：

複製代碼代碼如下：

qfocus標題>

函數forward(ev){
qfocus.onmouseClick( ev);
}
document.onmousedown=forward;
腳本>
頭>

身體>

效果圖：