使用JS与CSS实现自动隐藏悬浮框

JS与CSS实现自动隐藏悬浮框

本文演示如何使用JavaScript和CSS构建一个具备自动隐藏功能的悬浮框组件。其中，CSS负责定义视觉样式，而JavaScript则负责控制元素的显示与隐藏逻辑。通常实现显隐效果有两种常见方式：一是通过JavaScript直接修改元素的display属性；二是通过JavaScript调整元素的尺寸大小。

本例采用第二种方式，即通过控制元素尺寸来实现显隐效果。其核心原理是：为悬浮框注册鼠标移入（onmousemove）和移出（onmouseout）事件监听器。当鼠标离开悬浮框区域时，将其宽度设置为极小值（如1px）以实现视觉上的隐藏；当鼠标再次移入该区域时，将宽度恢复至原始值，从而重新显示内容。

隐藏状态下的视觉效果如下：

图中左侧那条细窄的线条即为悬浮框在隐藏状态下的形态。

显示状态下的视觉效果如下：

当鼠标指针移动到左侧隐藏的悬浮框区域时，悬浮框会自动展开并显示出来。

相关的CSS样式代码如下：

 
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html, body { margin:0px; padding:0px; overflow:hidden; }
.b { margin:0px; padding:0px; overflow:auto; }
.line0 { line-height:20px; background-color:lightyellow; padding:0px 15px; }
.line1 { line-height:18px; background-color:lightblue; padding:0px 10px; }
.w { position:absolute; lift:10px; top:10px; width:1px; height:300px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
.t { line-height:20px; height:20px; width:160px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
.winBody { height:270px; width:160px; overflow-x:auto; overflow-y:auto; border-top:1px inset blue; padding:10px; background-color:white; }
</style>

JavaScript逻辑代码如下：

 
<script type="text/javascript">
function myshow(){
//document.getElementById('mydiv').style.display = "none";
document.getElementById('mydiv').style.width = "160px";
} //block
function myhide(){
//document.getElementById('mydiv').style.display = "block";
document.getElementById('mydiv').style.width="1px";
} 
//测试用，随机生成一些内容，便于测试效果。
for(var i=0; i<400; i++)document.write("<div class=\"line"+(i%2)+"\">"+(new Array(20)).join((Math.random()*1000000).toString(36)+" ")+"<\/div>");
new function(w,b,c,d,o){
d=document;b=d.body;o=b.childNodes;c="className";
b.appendChild(w=d.createElement("div"))[c]= "b";
for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
(window.onresize = function(){
w.style.width = d.documentElement.clientWidth + "px";
w.style.height = d.documentElement.clientHeight + "px";
})(); 
<span style="white-space:pre"> </span>}
</script>

HTML结构代码如下：

 
<body >
<div class="w" id="mydiv" onmousemove="myshow()" onmouseout="myhide()">
<div class="t">学生信息</div>
<div class="winBody">
学号：<label>0123456789 </label><br><br>
姓名：<label>小明 </label><br><br>
学院：<label>软件学院 </label><br><br>
专业：<label>软件工程</label><br><br>
班级：<label>一班</label><br><br>
</div>
</div>
</body>

利用悬浮框展示信息是一种常见的前端交互模式。当用户需要将鼠标指向该区域时，悬浮框会展开显示；当鼠标移开时，它会自动收缩隐藏。这种设计虽然简单，但能显著提升用户体验，符合前端开发中追求舒适交互的目标。