获取鼠标坐标 tips 小示例

最新推荐文章于 2022-05-11 12:17:48 发布

zhangxm 0104

最新推荐文章于 2022-05-11 12:17:48 发布

阅读量370

点赞数 1

分类专栏： css js 文章标签： tips css 鼠标坐标

本文链接：https://blog.csdn.net/xmlove93/article/details/79015950

版权

js 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

获取鼠标坐标

funtion Get(event){
        var e = event || window.event;
        var pageX = e.pageX,
            pageY = e.pageY;
        console.log(pageX, pageY);
}

tips 示例

这里写图片描述

Html

<img src="~/Images/i.svg" onmouseover="show()" onmouseout="hid()" id="mj" />

Css

.suptips {
            position: absolute;
            z-index: 99;
            background: rgba(0,0,0,0.5);
            color: #fff;
            padding: 10px;
            border-radius: 5px;
        }

Js

    var $tips = $('#tips');
    if (!$tips.length) {
        $tips = $('<div id="tips" class="suptips" style="display:none"></div>');
        $('body').append($tips);
    }

    function show(event) {
        var e = event || window.event;
        var pageX = e.pageX,
            pageY = e.pageY;
        console.log(pageX, pageY);

        $tips.text('我是内容哈').css({
            top: pageY,
            left: pageX
        });

        $tips.fadeIn();
    }

    function hid() {
        $tips.fadeOut();
    }