jquery实现鼠标焦点十字效果

系统开发时很多地方需要有焦点效果，例如：鼠标点击聚焦，地图定位，在图片上突出显示，焦点定位页面元素。

本小功能通过jquery和graphics二次开发，实现通过鼠标点击页面任何区域，聚焦当前点击位置。适用于页面任何元素的位置效果。

首先引入jquery引擎包:jquery-1.4.2.min.js和graphics.js

http://download.csdn.net/detail/u010769276/5622689 源码下载地址

编写实现效果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 = '<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);
        }
 
        //是否显示横竖条
        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 = postion[0] + ((postion[2] - postion[0])/2);
		var y = postion[1] + ((postion[3] - postion[1])/2);
		return {"x":x,"y":y};
    }
}

html页面调用源码：

<!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>

效果图片：