今天，写的一个小例子，使用JS和CSS写的一个自动隐藏的悬浮frame.css绝对是用来控制风格，和JS是用来显示和隐藏控制。通常有显示和隐藏的两种方法：1、采用JS来控制它的显示性能；2，控制其大小的JS。

今天，我想说的是，通过控制大小，元素可以被隐藏。其原理是注册和移动鼠标进入和退出事件。当鼠标移出对象范围时，其宽度设置为1。当鼠标再次进入对象时，它的宽度被恢复，非常简单。让我们一起看吧。

隐藏状态：


左边的窄线是隐藏的悬挂架。

显示状态：

当鼠标滑到悬挂架的左侧时，悬挂箱再次显示出来。

CSS样式：
复制代码代码如下所示：

* {字体大小：12px；字体：Verdana，宋体；}
HTML，体{ margin: 0px；padding: 0px；溢出：隐藏；}
B { margin: 0px；padding: 0px；溢出：汽车；}
。line0 {线高度：20px；背景颜色：浅黄色；填充：0px 15px；}
。1 {线高度：18px；背景颜色：浅蓝色；填充：0px 10px；}
。W {位置：绝对；电梯：10px；顶部：10px；宽度：1px；身高：300px；溢出：隐藏；边界：2px槽# 281；光标：默认；-moz用户选择：无；}。
。T {线高度：20px；高度：20px；宽度：160px；溢出：隐藏；背景颜色：# 27c；颜色：白色；字体重量：大胆；底部边框：1px开始蓝；底部边框：1px；}。
。winbody {身高：270px；宽度：160px；overflow-x：汽车；汽车；overflow-y：边境上：1px镶蓝；padding: 10px；背景颜色：白色；}


JS代码：
复制代码代码如下所示：


功能美秀（）{
/ / document.getelementbyid（'mydiv）。style.display =没有；
document.getelementbyid（'mydiv）。style.width =160px ；

功能myhide（）{
/ / document.getelementbyid（'mydiv）。style.display =块；
document.getelementbyid（'mydiv）。风格。宽度= 1px；
}

测试，随机生成一些内容，容易测试效果。
对于（var i = 0；我+（新阵列（20））。加入（（Math.random）*（1000000），ToString（36）+）+）；

新函数（w，b，c，d，o）{
a文件；B = d.body；O = b.childnodes；C =类名；
b.appendchild（W = d.createelement（div））{ } =B；
对于（var i = 0；i < o.length-1；i++）如果（O {我} { }！=W）w.appendchild（O {我}），我—；
（window.onresize =函数（）{（）
w.style.width = d.documentelement.clientwidth +PX；
w.style.height = d.documentelement.clientheight +PX；
}）；
}


HTML代码：
复制代码代码如下所示：


学生信息

学校编号：0123456789
姓名：肖明
学院：软件学院
专业：软件工程
班级：一班




用悬浮架来显示一些信息，当你需要看它的时候，它就会出来，非常方便；当鼠标不需要被删除时，它会默默的离开你。虽然它很简单，但是有一个好的用户体验，让用户舒服的东西，是我们不断的追求。