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 相关文章推荐
改善用户体验的五款jQuery插件分享
May 22 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
js实现整体缩放页面适配移动端
Mar 31 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
非常不错的MySQL优化的8条经验
2008/03/24 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
laravel 数据验证规则详解
2019/10/23 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
python实现中文输出的两种方法
2015/05/09 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
python绘制汉诺塔
2021/03/01 Python
年度献血先进个人事迹材料
2014/02/14 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
三八活动策划方案
2014/08/17 职场文书
同志主要表现材料
2014/08/21 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang