实现搜索框跟随鼠标悬停菜单功能

先上效果图:

关键点只有一个:获取鼠标悬停点位置.

event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 
event.clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
event.screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标
event.screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
event.x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标
event.y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标

所以只需要搜索框的margin-top设置 event.pageY-event.offsetY(鼠标悬停li标签距离顶部的高度)

以下是源码直接运行即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        .title {
            display: block;
            background-color: #007ACC;
            color: #ffffff;
            height: 50px;
            line-height: 50px;
            width: 200px;
            padding-left: 20px;
            border-bottom: rgb(34, 69, 88) solid 1px;
        }
        .menu{
            float: left;
        }
        .menu ul {
            display: block;
        }

        .menu ul li {
            background-color: #399AD1;
            border-bottom: rgb(34, 69, 88) solid 1px;
            color: #ffffff;
            height: 40px;
            line-height: 40px;
            width: 200px;
            padding-left: 20px;
        }

        .search {
            /* display: none; */
            float: left;
            margin-left: 1px;
            width: 300px;
            height: 100px;
            background-color: #399AD1;
            border: #007ACC solid 2px;
        }
    </style>
</head>

<body>
    <div class="menu">
        <div>
            <span class="title">标题1</span>
            <ul style="display: none;">
                <li>标题1-小标题1</li>
                <li>标题1-小标题2</li>
                <li>标题1-小标题3</li>
            </ul>
        </div>
        <div>
            <span class="title">标题2</span>
            <ul style="display: none">
                <li>标题2-小标题1</li>
                <li>标题2-小标题2</li>
                <li>标题2-小标题3</li>
            </ul>
        </div>
    </div>
    <div class="search">
        <label for="time">日期:</label>
        <input type="text" id="time">
        <br>
        <label for="type">类型:</label>
        <input type="text" id="type">
        <br>
        <button>搜索</button>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".title").on("click", function () {
                $(this).next().slideDown();
                $(this).parent().siblings().children("ul").slideUp();
            })
            $("li").mouseover(function (e) {
                var self = $(this);
                $("li").css("background-color", "#399AD1");
                $(this).css("background-color", "red");
                console.log(e.pageY+"::"+e.offsetY);
                $(".search").css("margin-top", e.pageY-e.offsetY+20);
            });
        })
    </script>
</body>

</html>

View Code

实现搜索框跟随鼠标悬停菜单功能

猜你喜欢