jquery点击页面任何区域实现鼠标焦点十字效果


Posted in Javascript onJune 21, 2013

系统开发时很多地方需要有焦点效果,例如:鼠标点击聚焦,地图定位,在图片上突出显示,焦点定位页面元素。
本小功能通过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 = '<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>

效果图片:
jquery点击页面任何区域实现鼠标焦点十字效果
Javascript 相关文章推荐
js的event详解。
Sep 06 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
React配置子路由的实现
Jun 03 Javascript
js写一个字符串转成驼峰的实例
Jun 21 #Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 #Javascript
JS获得URL超链接的参数值实例代码
Jun 21 #Javascript
随窗体滑动的小插件sticky源码
Jun 21 #Javascript
jquery中文乱码的多种解决方法
Jun 21 #Javascript
js单向链表的具体实现实例
Jun 21 #Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 #Javascript
You might like
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
python实现二维码扫码自动登录淘宝
2016/12/27 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python函数式编程实例详解
2020/01/17 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
实体的生命周期
2013/08/31 面试题
Unix如何添加新的用户
2014/08/20 面试题
支教自我鉴定
2014/01/18 职场文书
学年末自我鉴定
2014/01/21 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
前处理组长岗位职责
2014/03/01 职场文书
公司应聘求职信
2014/06/21 职场文书
小学生成绩单评语
2014/12/31 职场文书
参观邀请函范文
2015/02/02 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL