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 相关文章推荐
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
javascript简易画板开发
Apr 12 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
element中的$confirm的使用
2020/04/26 Javascript
python访问sqlserver示例
2014/02/10 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
django认证系统 Authentication使用详解
2019/07/22 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
Python中内建模块collections如何使用
2020/05/27 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
工作过失检讨书
2014/02/23 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
致运动员赞词
2015/07/22 职场文书
事业单位岗位说明书
2015/10/08 职场文书
「月刊Action」2022年5月号封面公开
2022/03/21 日漫