名片效果实现

浅浅的花香味﹌ 2022-08-06 01:27 129阅读 0赞

允许转载，但请注明出处：http://blog.csdn.net/sysuzjz/article/details/41851711

模仿QQ空间、微博等鼠标悬浮在人名上时，显示用户详细信息

大体思路是将名片卡隐藏在页面中，当悬浮时将名片卡移动到鼠标边，鼠标移开时隐藏名片卡。

本文的JS使用了jquery

用户名跟名片卡代码如下（只是为了显示类名，具体内容按需补充）：

<pre name="code" class="html"><a href="#" class="user-link" data-uid="">用户名</a>

<div class="msg-card hide"></div>

JS代码如下：

var showMsgCardControl = null;
    // 鼠标悬浮在用户名上时，显示名片卡，并移动到鼠标边
    $(".user-link").mouseover(function(event) {
        clearShowControl();
        var position = getPosition(event);
        var uid = $(this).data("uid");
        $.ajax({
            type: "post",
            url: "your_backend_url",
            data: {
                "uid": uid
            },
            success: function(msg) {
                showMsgCard(position);
                changeMsgCard(msg);
            }
        })
    });
    // 鼠标离开用户名一定时间后，隐藏名片卡，如果在这段时间内鼠标移动至名片卡上，则取消隐藏，若再次离开名片卡一段时间，则隐藏名片卡
    $(".user-link").mouseout(function(event) {
        setShowControl();
    });
    
    
    $(".msg-card").mouseover(function(event) {
        clearShowControl();
    });
    
    
    $(".msg-card").mouseout(function(event) {
        setShowControl();
    });
    
    
    function changeMsgCard(msg) {
        $(".msg-card").replaceWith(
            '<div class="msg-card hide">' + 
    
    
            '</div>'
        );
    }
    
    
    function showMsgCard(position) {
        $(".msg-card").show().css({
            "top": position.y,
            "left": position.x
        });
    }
    
    
    function setShowControl() {
        showMsgCardControl = setTimeout(hideMsgCard, 1000);
    }
    
    
    function clearShowControl() {
        clearTimeout(showMsgCardControl);
    }
    
    
    function hideMsgCard() {
        $(".msg-card").hide();
    }
    
    
    // mouseCoord获取到的坐标为鼠标尖端，各加20以避免被鼠标挡住
    function getPosition(event) {
        var pos = mouseCoords(event);
        return {
            x: pos.x + 20,
            y: pos.y + 20
        };
    }
    
    
    // 获取当前事件(鼠标)发生的坐标
    function mouseCoords(event) 
    { 
        if(event.pageX || event.pageY){ 
            return {
                x:event.pageX,
                y:event.pageY
            }; 
        }
        // IE不支持上面的，则会执行下面的代码
        return { 
            x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:event.clientY + document.body.scrollTop - document.body.clientTop
        }; 
    };

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关基于Android的名片信息管理系统设计与实现

目　录摘要 I Abstract II 第1章绪论 1 1.1 课题的提出与背景 1 1.2 研究的目的及意义 2 1.3国内外研究现状分析 2

悠悠/ 2024年04月07日 13:32/ 0 赞/ 53 阅读

相关 python实现名片管理系统

先新建一个包，命名为exercise 包下面新建两个python file card\_main.py card\_tools.py ![在这里插入图片描述][

Dear 丶/ 2022年12月06日 12:59/ 0 赞/ 79 阅读

相关实现放大镜效果

1、布局文件 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http:

╰半夏微凉°/ 2022年08月19日 12:16/ 0 赞/ 242 阅读

相关名片效果实现

允许转载，但请注明出处：http://blog.csdn.net/sysuzjz/article/details/41851711 模仿QQ空间、微博等鼠标悬浮在人名上时，显

浅浅的花香味﹌/ 2022年08月06日 01:27/ 0 赞/ 130 阅读

相关 linux tesseract识别名片

用tesseract识别名片，无任何训练 ![Center][] 数字，字母识别的准确率比较高，没有错误，规范的汉字识别的还可以，比如名片背面，正面的就错误

Love The Way You Lie/ 2022年07月10日 04:28/ 0 赞/ 186 阅读

相关 openssl 百科名片

为网络通信提供安全及数据完整性的一种安全协议，囊括了主要的密码算法、常用的[密钥][Link 1]和证书封装管理功能以及SSL协议，并提供了丰富的[应用程序][Link 2]供

朴灿烈づ我的快乐病毒、/ 2022年06月18日 01:53/ 0 赞/ 166 阅读

相关名片印刷分类

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 名片作为企业商务印刷的主要印品品类，印刷和后期工艺种类较

布满荆棘的人生/ 2022年01月16日 07:01/ 0 赞/ 184 阅读

相关按键精灵实现自动化点qq名片赞

1. 引子好友比较多，每天回名片赞回到手痛。之前写过一个更简单版本（直接指定坐标点击……），重装系统丢了，正好重新写了一个跑在虚拟机里的，不耽误我干活。 2.

╰半夏微凉°/ 2022年01月05日 13:23/ 0 赞/ 647 阅读

相关（Python）名片管理系统实现增删改查

注：cards\_main.py为主函数 cards\_tools.py为功能函数 cards\_main.py主函数 import cards_tools

末蓝、/ 2021年12月24日 07:05/ 0 赞/ 291 阅读

相关用python 实现名片管理系统（Python经典编程案例）

名片管理系统：功能： 1. 新增名片（记录用户的姓名，电话，QQ，邮箱）； 2. 显示所有名片； 3. 查询名片； 4. 查询成功后可以修改，删除名片项目结构

桃扇骨/ 2021年12月05日 03:04/ 0 赞/ 365 阅读