實現搜索框跟隨鼠標懸停菜單功能
阿新 • • 發佈：2018-06-03
block cti fse func jquery F5 cal ble nbsp 
先上效果圖:
關鍵點只有一個:獲取鼠標懸停點位置.
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" contentView Code="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>
實現搜索框跟隨鼠標懸停菜單功能