Discuz 鼠标悬停弹出名片功能的运用

在网站建设中，尤其是使用Discuz! X系列时，我们可能会遇到一些与用户名片弹出功能相关的问题。本文将详细探讨如何实现类似 `home.php?mod=space&uid=1` 的名片弹出效果，并提供优化方案。
首先，我们需要了解名片弹出功能的核心机制。通过分析 `common.js` 文件中的代码，可以发现以下关键点：


function cardInit() {
    var cardShow = function (obj) {
        if (BROWSER.ie && BROWSER.ie < 7 && obj.href.indexOf('username') != -1) {
            return;
        }
        pos = obj.getAttribute('c') == '1' ? '43' : obj.getAttribute('c');
        USERCARDST = setTimeout(function () { ajaxmenu(obj, 500, 1, 2, pos, null, 'p_pop card'); }, 250);
    };
    var cardids = {};
    var a = document.body.getElementsByTagName('a');
    for (var i = 0; i < a.length; i++) {
        if (a[i].getAttribute('c')) {
            var href = a[i].getAttribute('href', 1);
            if (typeof cardids[href] == 'undefined') {
                cardids[href] = Math.round(Math.random() * 10000);
            }
            a[i].setAttribute('mid', 'card_' + cardids[href]);
            a[i].onmouseover = function () { cardShow(this) };
            a[i].onmouseout = function () { clearTimeout(USERCARDST); };
        }
    }
}

从上述代码可以看出，`cardInit` 函数通过为带有 `c=1` 属性的链接绑定鼠标悬停事件（`onmouseover` 和 `onmouseout`），调用 `ajaxmenu` 方法动态加载内容。这表明，名片弹出功能依赖于 AJAX 技术和特定的 URL 参数。
### 实现步骤为了使自定义页面也能支持类似的名片弹出效果，我们需要对页面进行调整。以下是具体步骤： 1. **修改模板文件** 在模板文件中加入对 `inajax` 参数的判断。例如，对于 `forumdisplay.htm` 页面，可以这样修改：




forumdisplay.htm文件里除头尾以外所有代码

从forumdisplay.htm里复制出来关于版块信息部分的代码

2. **添加 `c=1` 属性** 在需要触发弹出效果的链接中，添加 `c=1` 属性。例如：


{$value['name']}

3. **测试效果** 访问类似 `forum.php?mod=forumdisplay&fid=43&inajax=1` 的 URL，确保返回的内容符合预期。
### 注意事项 - **缓存机制** `ajaxmenu` 方法中的 `cache` 参数设置为 `1`，表示启用缓存。因此，在调试过程中可能需要清除浏览器缓存以查看最新效果。 - **加载动画** 直接弹出可能会显得突兀，建议添加一个简单的加载动画来提升用户体验。 - **兼容性** 确保所使用的浏览器版本支持相关 JavaScript 功能。本文测试环境为 Discuz! X3.4 UTF-8、PHP 7.0 和 Firefox 61.0.1。
### 总结通过以上方法，我们可以轻松实现类似于 `home.php?mod=space&uid=1` 的名片弹出效果。这种方法不仅适用于论坛模块，还可以扩展到其他自定义页面。值得注意的是，虽然可以借助第三方插件或 jQuery 库实现类似功能，但 Discuz! 自带的解决方案更加高效且易于维护。希望本文能帮助您更好地理解并实现这一功能！如果您还有任何疑问，请随时留言交流。

推荐阅读