名片效果实现

浅浅的花香味﹌ 2022-08-06 01:27 166阅读 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 条评论，166人围观）

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

相关阅读

相关 Python实现名片管理系统

综合应用已经学习过的知识点：变量流程控制函数模块系统需求 1.程序启动，显示名片管理系统欢迎界面，并显示功能菜单

谁借莪１个温暖的怀抱￠/ 2023年09月28日 21:07/ 0 赞/ 16 阅读

相关名片管理系统

cards\_main.py import cards_tools while True: 显示菜单 cards_

痛定思痛。/ 2023年06月25日 10:28/ 0 赞/ 23 阅读

相关 Python｜名片管理系统

以下是名片管理系统，前几天学习了tkinter，这个是本次期末考试的作业。代码写得不是美观，有很多缺陷，比如在循环列表里的字典，判断有还是没有时会弹出多个窗口。。。。希望有路过

旧城等待，/ 2023年02月18日 01:50/ 0 赞/ 25 阅读

相关 python实现名片管理系统

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

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

相关名片效果实现

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

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

相关 linux tesseract识别名片

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

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

相关 openssl 百科名片

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

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

相关名片印刷分类

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

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

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

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

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

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

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

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