个人中心
gpt4 book ai didi

jquery - 如何使用jquery中的.hover事件获取html中的坐标？

转载 作者：行者123 更新时间：2023-12-01 06:20:22 25 4
gpt4 key购买 nike

每个人都可以帮助我如何创建包含 x y 坐标的工具提示吗？这是我的示例代码:

    <style type="text/css">
        a img {
            border: 3px solid blue;
        }

        #largeImage {
            position: absolute;
            padding: .5em;
            background: #e3e3e3;
            border: 1px solid #bfbfbf;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            var offsetX = 20;
            var offsetY = 10;

            $('a').hover(function(e) {
                var href = $(this).attr('href');

                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;

                $('<div id="largeImage">' + 'X: ' + x + ' Y: ' + y + '</div>')
                .css('top', e.pageY + offsetY)
                .css('left', e.pageX + offsetX)
                .appendTo('body');
            }, function() {
                $('#largeImage').remove();
            });

            $('a').mousemove(function(e) {
                $('#largeImage')
                .css('top', e.pageY + offsetY)
                .css('left', e.pageX + offsetX);
            });
        });
    </script>

<body>
    <a href="Images/FredLarge.jpg">
        <img src="Images/FredSmall.jpg" alt="squidward" />
    </a>
</body>

此示例中发生的情况是坐标没有改变。虽然它得到了坐标但它并没有改变。

*这段代码实际上就像图像的工具提示，所以忽略id名称即可。

最佳答案

hover 不会连续触发。它只会在您移过去时触发一次，并在您移出时触发一次。这就是为什么它不随鼠标移动的原因。尝试绑定(bind)到mousemove反而。 jQuery 文档甚至有一个将鼠标悬停在正方形上并显示坐标的示例。

关于jquery - 如何使用jquery中的.hover事件获取html中的坐标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9986312/

25 4 0
文章推荐： jquery - 使用 jquery 创建动态图
文章推荐： java - 每次在类中使用特定注释时运行方法
文章推荐： java - 无法使用 Ant 获得按照我想要的方式构造的 jar 文件
文章推荐： python - 区别 - tf.gradients 与 tf.keras.backend.gradients
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com