js和钢性铸铁写一个可以自动隐藏的悬浮框

今天写一个小实例，用射流研究…和钢性铸铁写一个可以自动隐藏的悬浮框css。肯定是用来控制样式的，js用来控制器显示与隐藏的。显示与隐藏通常有两种方法实现：1,用射流研究…控制其显示属性；2,用射流研究…控制其大小。今天要说的就是通过控制其大小来实现元素的显隐，原理：为其注册鼠标移入、移出的事件，当鼠标移出对象范围，将其宽度设为1,当鼠标再次移入该对象，将其宽度还原。很简单，我们一起看看吧！隐藏状态

左边那一条窄线就是隐藏以后的悬浮框。显示状态

当鼠标滑到左边的悬浮框上，悬浮框就又显示出来了CSS。样式：复制代码代码如下：样式* { font-size :12 pxfont-family:Verdana，宋体；} html，正文{ margin:0pxpadding:0px飞越：隐藏；} .b { margin :0 pxpadding :0 px飞越：汽车；} .第0行{行高：20 px背景-颜色：浅黄色；padding:0px 15px }。第1行{行高：18 px背景色：浅蓝色；padding:0px 10px }。w { position : absolute elift :10 xtop :10 px宽度：1 px高度：300 px飞越：隐藏；border:2px凹槽# 281;cursor : default-moz-user-select : none；} .t {行高：20 px高度：20 px宽度宽度：160像素飞越：隐藏；背景色-: # 27C；颜色：白色；字体粗细：加粗；边框-底部：1px起始蓝色；文本对齐：居中；} .winBody { height:270px宽度width :160 pxoxoverflow-x : auto；溢出-y :汽车；边框-top:1px嵌入蓝色；padding:10px背景-颜色：白色；}/样式射流研究…代码：复制代码代码如下：脚本类型='text/javascript '函数myshow(){//文档。getelementbyid(' mydiv ')。风格。显示='无'；文件。getelementbyid(' my div ')。风格。宽度=' 160像素'；}//块函数my hide(){//文档。getelementbyid(' mydiv ')。风格。display=' block文件。getelementbyid(' my div ')。风格。宽度=' 1px} //测试用，随机生成一些内容，便于测试效果for(var I=0；i400I)文档。写入(' div class=\ ' line '(I % 2)' \ ' ()新数组(20))。join((Math.random()*1000000).toString(36)' ')' \/div ')；新功能(w，b，c，d，o){ d=文档；b=d .车身；o=b.childNodesc=' classNameb。append child(w=d . create element(' div ')[c]=' b '；for(var I=0；io。长度-1；i )if(o[i][c]！='w')w.appendChild(o[i])，I-；(窗口。onresize=function(){ w . style。宽度=d .文档元素。客户端宽度' px '；西式。高度=d .文档元素。客户端高度“px”；})();span style='空白： pre '/span }/脚本超文本标记语言代码：复制代码代码如下： body div class=' w ' id=' my div ' on mousemove=' myshow()' on mouseout=' my hide()' div class=' t '学生信息/div div class='winBody '学号：标签0123456789/标签RBR姓名：标签小明/标签RBR学院：标签软件学院/标签RBR专业：标签软件工程/标签RBR班级：标签一班/标签RBR/分区/分区/正文用悬浮框来显示一些信息，当需要看的时候，指向它，它就会乖乖的出来，很方便；当不需要的时候鼠标移开，它又会很识趣的自己默默离开。虽然很简单，但是却有不错的用户体验，做出让用户用着舒服的东西，是我们不变的追求。