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 相关文章推荐
JavaScript 加号(+)运算符号
Dec 06 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
使用Dropzone.js上传的示例代码
Oct 10 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
vue实现轮播图帧率播放
Jan 26 Vue.js
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实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
php文件包含的几种方式总结
2019/09/19 PHP
js 数组操作代码集锦
2009/04/28 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python一键升级所有pip package的方法
2017/01/16 Python
python中模块查找的原理与方法详解
2017/08/11 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
如何基于python操作excel并获取内容
2019/12/24 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
django rest framework serializers序列化实例
2020/05/13 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
Otel.com:折扣酒店预订
2017/08/24 全球购物
六一文艺汇演开幕词
2015/01/29 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
养成教育主题班会
2015/08/13 职场文书
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
Go并发4种方法简明讲解
2022/04/06 Golang