jquery点击页面任何区域实现鼠标焦点十字效果 - Web前端
作者：98wpeu发布时间：2026-07-10分类：网页前端技术浏览：72
导读：系统开发时很多地方需要有焦点效果，例如：鼠标点击聚焦，地图定位，在图片上突出显示，焦点定位页面元素。本小功能通过JQuery和graphics二次开发，实现通过鼠标点击页面任何区...
系统开发时很多地方需要有焦点效果，例如：鼠标点击聚焦，地图定位，在图片上突出显示，焦点定位页面元素。
本小功能通过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页面调用源码：
复制代码 代码如下:
<!DOCtypeHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metaHTTP-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和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页面调用源码：
复制代码 代码如下:
<!DOCtypeHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metaHTTP-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一种取同级值的方式(比如你在GridView中) - Web前端
- 修改jQuery Validation里默认的验证方法 - Web前端
- jQuery源码分析-05异步队列 Deferred 使用介绍 - Web前端
- 20个最新的jQuery插件 - Web前端
- 远离JS灾难css灾难之 js私有函数和css选择器作为容器 - Web前端
- jquery.fileEveryWhere.js 一个跨浏览器的file显示插件 - Web前端
- editable.js 基于jquery的表格的编辑插件 - Web前端
- Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中 - Web前端
- 读jQuery之十四 （触发事件核心方法） - Web前端
- 基于Jquery的文字自动截取（提供源代码） - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3【第六章】Foundation之按钮和下拉功能 - Web前端
- 4jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 8在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 9分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性