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

2024-04-11 20:28

本文主要是介绍实现鼠标在页面点击出现焦点及大十字星,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

代码实现步骤如下:

1.首先引用 jquery.1.7.js

2.再次引用raphael.js

3.然后引用graphics.js

4.最后引用mfocus.js

其中mfocus.js代码如下

var mfocus = {
    config: {
        "bar_dis": true, //横竖条显示或隐藏
        "circle_dis": true, //焦点隐藏
        "bar_color": "Yellow", //线条颜色
        "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");//需引用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.chinasem.cn/article/895094

相关文章

Python位移操作和位运算的实现示例

《Python位移操作和位运算的实现示例》本文主要介绍了Python位移操作和位运算的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 位移操作1.1 左移操作 (<<)1.2 右移操作 (>>)注意事项:2. 位运算2.1

如何在 Spring Boot 中实现 FreeMarker 模板

《如何在SpringBoot中实现FreeMarker模板》FreeMarker是一种功能强大、轻量级的模板引擎,用于在Java应用中生成动态文本输出(如HTML、XML、邮件内容等),本文... 目录什么是 FreeMarker 模板?在 Spring Boot 中实现 FreeMarker 模板1. 环

Qt实现网络数据解析的方法总结

《Qt实现网络数据解析的方法总结》在Qt中解析网络数据通常涉及接收原始字节流,并将其转换为有意义的应用层数据,这篇文章为大家介绍了详细步骤和示例,感兴趣的小伙伴可以了解下... 目录1. 网络数据接收2. 缓冲区管理(处理粘包/拆包)3. 常见数据格式解析3.1 jsON解析3.2 XML解析3.3 自定义

SpringMVC 通过ajax 前后端数据交互的实现方法

《SpringMVC通过ajax前后端数据交互的实现方法》:本文主要介绍SpringMVC通过ajax前后端数据交互的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价... 在前端的开发过程中,经常在html页面通过AJAX进行前后端数据的交互,SpringMVC的controll

Spring Security自定义身份认证的实现方法

《SpringSecurity自定义身份认证的实现方法》:本文主要介绍SpringSecurity自定义身份认证的实现方法,下面对SpringSecurity的这三种自定义身份认证进行详细讲解,... 目录1.内存身份认证(1)创建配置类(2)验证内存身份认证2.JDBC身份认证(1)数据准备 (2)配置依

利用python实现对excel文件进行加密

《利用python实现对excel文件进行加密》由于文件内容的私密性,需要对Excel文件进行加密,保护文件以免给第三方看到,本文将以Python语言为例,和大家讲讲如何对Excel文件进行加密,感兴... 目录前言方法一:使用pywin32库(仅限Windows)方法二:使用msoffcrypto-too

C#使用StackExchange.Redis实现分布式锁的两种方式介绍

《C#使用StackExchange.Redis实现分布式锁的两种方式介绍》分布式锁在集群的架构中发挥着重要的作用,:本文主要介绍C#使用StackExchange.Redis实现分布式锁的... 目录自定义分布式锁获取锁释放锁自动续期StackExchange.Redis分布式锁获取锁释放锁自动续期分布式

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》:本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务,增加、删

SpringBoot整合mybatisPlus实现批量插入并获取ID详解

《SpringBoot整合mybatisPlus实现批量插入并获取ID详解》这篇文章主要为大家详细介绍了SpringBoot如何整合mybatisPlus实现批量插入并获取ID,文中的示例代码讲解详细... 目录【1】saveBATch(一万条数据总耗时:2478ms)【2】集合方式foreach(一万条数

使用Python实现矢量路径的压缩、解压与可视化

《使用Python实现矢量路径的压缩、解压与可视化》在图形设计和Web开发中,矢量路径数据的高效存储与传输至关重要,本文将通过一个Python示例,展示如何将复杂的矢量路径命令序列压缩为JSON格式,... 目录引言核心功能概述1. 路径命令解析2. 路径数据压缩3. 路径数据解压4. 可视化代码实现详解1