js实现鼠标移入特定位置显示个人下拉菜单

最新推荐文章于 2023-06-30 17:01:07 发布

syousetu

最新推荐文章于 2023-06-30 17:01:07 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/syousetu/article/details/108099391

版权

javascript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用JavaScript根据鼠标位置动态控制下拉菜单的显示，详细阐述了实现这一功能的原理和具体代码实现步骤。

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

原理

根据鼠标的位置来控制下拉列表是否显示

代码实现

//根据鼠标的位置 控制个人下拉列表的显示
window.user_ul_show = function () {
    $("body").mousemove(function () {
        // console.log("鼠标移动事件")
//     获取区域位置
        var y1 = $("#login").offset().top
        console.log("y1:" + y1)
        var y2 = $("#user_ul").height() + y1 + $("#login").height()
        var y3 = $("#login").offset().top + $("#login").height() - 25
        console.log("y2:" + y2)
        var x1 = $("#login").offset().left
        console.log("x1:" + x1)
        var x2 = $("#user_ul").width() + x1

        console.log("x2:" + x2)
        console.log("window.mouse_x:" + window.mouse_x)
        console.log("window.mouse_y:" + window.mouse_y)
        if (window.mouse_x > x1 & window.mouse_x < x2 & window.mouse_y > y1 & window.mouse_y < y3) {
            // console.log("进入if")
            $("#user_ul").show()
            $("#user_ul").slideDown()
            // if (window.mouse_x > x1 & window.mouse_x < x2 & window.mouse_y > y1 & window.mouse_y < y2) {
            //     // console.log("进入if")
            //     $("#user_ul").show()
            //     $("#user_ul").slideDown()
            // } else {
            //     $("#user_ul").slideUp()
            // }
        } else if (!($("#user_ul").is(':hidden'))) {
            if (window.mouse_x > x1 & window.mouse_x < x2 & window.mouse_y > y1 & window.mouse_y < y2) {
                $("#user_ul").show()
                $("#user_ul").slideDown()
            } else {
                $("#user_ul").slideUp()

            }
        }

    })

}