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

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

效果图片:

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


问题背景 最近小伙伴提了一个希望提高后台下拉列表可操作性的需求,原因是下拉列表选项过多,每次下拉选择比较费时费力且容易出错,硬着头皮啃了啃前端知识,网上搜寻了一些下拉列表实现的资料,这里总结一下。 P
// n位随机数生成 function randomNum(n) { let sString = &quot;&quot;; let strings = &quot;abcdefghijklmnopq
HTML是HyperText Markup Language的简称,中文名称:超文本标记语言,它是一种用于创建网页的 标准标记语言
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
JavaScript 是脚本语言,是一种解释性脚本语言(代码不进行预编译)
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 一名开发者或设计师通常可以在一秒内指出优秀的设计,但对于糟糕的设计只需最多半
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 Excel是我们办公中常用的工具 ,它几乎能为我们处理大部分数据,友好的交互
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/8-tips-for-an-awesome-sign
本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 如果我们自己编写从URL中分析和提取元素的代码,那么有可能会比较痛苦
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/what-is-deno-and-will-it-r
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/4-reasons-to-use-sass-in-y
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/vuejs-3-0-0-beta-features-
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/sessionstorage-and-localst
一直以来,JavaScript使用数组和对象来定义和存放结构化数据, 在这篇文章中,我们将一起深挖另一种对象Map的一切,我们将会去了解它是什么、如何遍历、都包括什么属性和方法以及优缺点是什么。
由于CSS的出现,现在的网站风格已经与它们很早之前的样子有了很大的不同。CSS的出现为原本平平无奇的网页注入了活力。这也是网站的用户体验得到进一步进化的原因。这可能就是当今几乎所有的网站或多或少都在使
自苹果推出了iPhone应用商店以来,App成为了我们生活中不可或缺的一部分,而对于实体业务也是如此,现在各行业都在推出自己的App,但有没有人想过这样一种场景,如果自己的潜在客户还没有安装你的App
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/10-top-chrome-extensions-f
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/do-your-buttons-lead-or-mi
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 前段时间在开发【葡萄城社区】公众号时有一个功能是需要用网页授权认证地址生成二
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 HTML5的发展改变了互联网技术趋势,前端热度依旧不减,所以对于应用开发人员