漂亮的jquery鼠标焦点十字效果

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

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

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

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

编写实现效果js文件，qfocus.js,源码如下：

[javascript] view plain copy print ?

1. var qfocus = { 
2.     config:{ 
3.         "bar_dis":true,//横竖条显示或隐藏 
4.         "circle_dis":true,//焦点隐藏 
5.         "bar_color":"black",//线条颜色 
6.         "circle_color":"red",//圆圈颜色 
7.         "rect_color":"green"//方块颜色 
8.     }, 
9.     locationTimer: null,//时间控制标识符 
10.     onmouseClick: function(ev){//鼠标点击获取鼠标位置画聚焦效果 
11.         var point = this.mousePosition(ev); 
12.         this.showFocus(point); 
13.     }, 
14.     onclickElement:function(obj) {//鼠标点击获取坐标做焦点 
15.         var _point = this.elementPosition(obj); 
16.         this.showFocus(_point); 
17.     }, 
18.     showFocus:function (point) {//显示焦点效果 
19.         if (this.locationTimer) { 
20.             clearTimeout(this.locationTimer); 
21.         } //清除定时器 
22.         
23.         var mapDiv = "#mapdiv"; 
24.         var _point = point; 
25.          
26.         var canvas = $("#canvas"); 
27.         var vLine = $("#vline"); 
28.         var hLine = $("#hline"); 
29.          
30.         //焦点隐藏或显示 
31.         if (this.config["circle_dis"] == true) { 
32.             if (!$("#canvas").attr("id")) { 
33.                 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;"/>'; 
34.                 $(canvas).appendTo("body"); 
35.             } else { 
36.                 canvas.css("left", (_point.x - 25) + "px"); 
37.                 canvas.css("top", (_point.y - 25) + "px"); 
38.                 canvas.show(); 
39.             } 
40.             paper = Raphael("canvas"); 
41.             paper.clear(); 
42.              
43.             var rect = paper.rect(20, 20, 10, 10, 0); 
44.             rect.attr("stroke", this.config["rect_color"]); 
45.             rect.attr("stroke-width", 1); 
46.         } 
47.          
48.         //是否显示横竖条 
49.         if (this.config["bar_dis"] == true) { 
50.             if (!$("#vline").attr("id")) { 
51.                 vLine = "<div id='vline' style='background-color:"+this.config["bar_color"]+";height:100%;width:1px;position:absolute;top:0px;left:" + (_point.x) + "px;'/>"; 
52.                 $(vLine).appendTo("body"); 
53.             } else { 
54.                 $(vLine).css("left",(_point.x) + "px"); 
55.                 vLine.show(); 
56.             } 
57.             if (!$("#hline").attr("id")) { 
58.                 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;'/>"; 
59.                  $(hLine).appendTo("body"); 
60.             } else { 
61.                 $("#hline").css("top",(_point.y ) + "px"); 
62.                 hLine.show(); 
63.             } 
64.         } 
65.         this.hideFocus(); 
66.         return true; 
67.     },  hideFocus:function() {//隐藏焦点效果 
68.         if (paper != null) { 
69.             var circle = paper.circle(25, 25, 30); 
70.             circle.attr("stroke", this.config["circle_color"]); 
71.             circle.attr("stroke-width", 1); 
72.             var anim = Raphael.animation({ 
73.                 r: 5 
74.             }, 900, null, function(){ 
75.                 this.locationTimer = setTimeout(function(){ 
76.                     $("#canvas").hide(); //焦点 
77.                     $("#vline").hide();  //横条 
78.                     $("#hline").hide();  //竖条 
79.                     clearTimeout(this.locationTimer); 
80.                 }, 500); 
81.             }); 
82.             circle.animate(anim); 
83.         } else { 
84.             this.locationTimer = setTimeout(function(){ 
85.                 $("#canvas").hide(); //焦点 
86.                 $("#vline").hide();  //横条 
87.                 $("#hline").hide();  //竖条 
88.                 clearTimeout(this.locationTimer); 
89.             }, 500); 
90.         } 
91.          
92.     },mousePosition:function (e) { 
93.         var x,y; 
94.         var e = e||window.event; 
95.         return { 
96. x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
97.             y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop 
98.         } 
99.     },elementPosition:function( oElement ) { 
100.         var x2 = 0; 
101.         var y2 = 0; 
102.         var width = oElement.offsetWidth; 
103.         var height = oElement.offsetHeight; 
104.         var postion  = ""; 
105.         if( typeof( oElement.offsetParent ) != 'undefined' ){ 
106.             for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent ) { 
107.                 posX += oElement.offsetLeft; 
108.                 posY += oElement.offsetTop;       
109.             } 
110.             x2 = posX + width; 
111.             y2 = posY + height; 
112.             postion = [ posX, posY ,x2, y2]; 
113.         } else{ 
114.             x2 = oElement.x + width; 
115.             y2 = oElement.y + height; 
116.             postion = [ oElement.x, oElement.y, x2, y2]; 
117.         } 
118.         var x = postion[0] + ((postion[2] - postion[0])/2); 
119.         var y = postion[1] + ((postion[3] - postion[1])/2); 
120.         return {"x":x,"y":y}; 
121.     } 
122. } 

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页面调用源码：

[html] view plain copy print ?

1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
2. <html> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
5. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
6. <script type="text/javascript" src="js/graphics.js"></script> 
7. <script type="text/javascript" src="js/qfocus.js"></script> 
8. <title>qfocus</title> 
9. <script type="text/javascript"> 
10. function forward(ev){  
11.     qfocus.onmouseClick(ev); 
12. } 
13. document.onmousedown=forward; 
14. </script> 
15. </head> 
16. <body> 
17. </body> 
18. </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>

效果图片：

 

 

 

转载于:https://my.oschina.net/haquanwen/blog/159889