js控件位置

最新推荐文章于 2017-11-23 09:08:27 发布

转载最新推荐文章于 2017-11-23 09:08:27 发布 · 165 阅读

本文详细介绍了如何使用JavaScript实现层的动态显示设置，包括层的位置调整、定位方式和响应式布局，通过设置层的left、top和position属性，使得层能够跟随鼠标移动，并保持在视口内的可见范围。

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

 function ShowSettingDiv() {
            var div = document.getElementById('ShowDiv'); //将要弹出的层
            div.style.display = "block"; //ShowDiv初始状态是不可见的，设置可为可见 
            //window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状. 
            //clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。

            div.style.left = event.clientX + 15; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
            div.style.top = event.clientY + document.documentElement.scrollTop + 15;
            div.style.position = "absolute"; //必须指定这个属性，否则div3层无法跟着鼠标动


        }