Js浮动页面顶部或鼠标点击处弹出提示层

最新推荐文章于 2024-10-16 11:03:04 发布

canlynet

最新推荐文章于 2024-10-16 11:03:04 发布

阅读量726

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web开发文章标签：前端 javascript ViewUI

本文链接：https://blog.youkuaiyun.com/canlynet/article/details/84752574

Web开发专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种模仿QQ邮箱的浮动提示层实现方法。通过获取鼠标的坐标位置，在相应位置显示提示信息，同时适用于页面加载时显示。使用了jQuery进行DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

QQ邮箱在删除邮件时，那个浮动提示层很方便。

为此，我写了一个鼠标移动时修改坐标，这样随时可以弹出该位置的提示层的方法。

改进了一下，如果刚打开页面也要浮动提示，这时候也需要坐标，鼠标位置坐标按照顶层坐标给。

如下：

var globalObj = {
    timer: {},
    mouse_pos: {
        x: 0,
        y: 0
    },
    top_pos: {
        x: 0,
        y: 0
    },
    getMousePosition: function(ev) {
        ev = ev || window.event;
        if (ev.pageX || ev.pageY) {
            return {
                x: ev.pageX,
                y: ev.pageY
            };
        }
        if (!ev.clientX) return this.getTopPosition();
        return {
            x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y: ev.clientY + document.body.scrollTop - document.body.clientTop
        };
    },
    getTopPosition: function() {
        return {
            x: document.body.scrollLeft + document.body.clientWidth / 2,
            y: document.body.scrollTop - document.body.clientTop
        };
    },
    GetPoint: function(ev) {
        var p = this.getMousePosition(ev);
        this.mouse_pos.x = p.x;
        this.mouse_pos.y = p.y;
        p = this.getTopPosition();
        this.top_pos.x = p.x;
        this.top_pos.y = p.y;
    },
    showHtmlTipAboveMouse: function(html_tip, time, id) {
        var pos = {
            x: this.mouse_pos.x,
            y: this.mouse_pos.y - 30
        };
        if (pos.y < 0) pos.y = 0;
        if (pos.x < 0) pos.x = 0;
        if (!id) id = 'showHtmlTipAboveMouse';
        this.showHtmlTip(html_tip, pos, time, id);
    },
    showHtmlTipOnTop: function(html_tip, time, id) {
        var pos = {
            x: this.top_pos.x,
            y: this.top_pos.y
        };
        if (!id) id = 'showHtmlTipOnTop';
        this.showHtmlTip(html_tip, pos, time, id);
    },
    showHtmlTip: function(html_tip, pos, time, id) {
        if (!id) id = 'showHtmlTip';
        $('#' + id).remove();
        if (!time) time = 1;
        else time = parseInt(time);
        var dom = $('<div id="'+id+'"></div>').html(html_tip).css({
            'height': '20px',
            'line-height': '20px',
            'font-size': '12px',
            'padding': '2px 10px',
            'border': 'solid 1px #A8FF24',
            'position': 'absolute',
            'background': '#00A600',
            'margin': '0px',
            'display': 'none',
            'color': '#fff',
            'opacity': '1.0'
        });

        $('body').append(dom);
        var left = pos.x - dom.width() / 2;
        var top = pos.y;
        dom.css({
            display: '',
            top: top + 'px',
            left: left + 'px'
        });
        if (this.timer[id]) {
            clearTimeout(this.timer[id]);
            this.timer[id] = null;
        }
        this.timer[id] = setTimeout(function() {
            dom.fadeOut();
        }, (time * 1000));
    }
}


$(function() {
    globalObj.GetPoint();
    globalObj.showHtmlTipAboveMouse('Mouse浮动提示层---------------------------------------------');
    globalObj.showHtmlTipOnTop('Top浮动提示层');
    $(document).mousemove(function(ev) {
        setTimeout(function() {
            globalObj.GetPoint(ev);
        }, 200);
    });
    $('#main_div').click(function() {
        globalObj.showHtmlTipAboveMouse('Mouse浮动提示层');
        globalObj.showHtmlTipOnTop('Top浮动提示层');
    });
});

附件中就是代码。

需要jquey的支持。