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 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
Jquery倒计时源码分享
May 16 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
jquery获取节点名称
Apr 26 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
为什么要使用Vuex的介绍
Jan 19 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
学习使用curl采集curl使用方法
2012/01/11 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
js面向对象的写法
2016/02/19 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
js运动事件函数详解
2016/10/21 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
基于Python os模块常用命令介绍
2017/11/03 Python
Python登录系统界面实现详解
2019/06/25 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
基于python实现查询ip地址来源
2020/06/02 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
检讨书1000字
2014/10/11 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
学生退学证明
2015/06/23 职场文书