实现鼠标在页面点击出现焦点及大十字星

近段时间，在完成项目进度情况显示时候，用户在操作鼠标时候，显示当鼠标所在位置对应时间如下图所示

代码实现步骤如下：

1.首先引用 jquery.1.7.js

2.再次引用raphael.js

3.然后引用graphics.js

4.最后引用mfocus.js

其中mfocus.js代码如下

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");//需引用raphael.js
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 };
}
}

<!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.7.js"></script>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/graphics.js"></script>
<script type="text/javascript" src="js/mfocus.js"></script>
<title>qfocus</title>
<script type="text/javascript">
function forward(ev){ mfocus.onmouseClick(ev);
}
document.οnmοusedοwn=forward;
</script>
</head>
<body>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/806378.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！