今天写一个小实例，用js和css写一个可以自动隐藏的悬浮框。css肯定是用来控制样式的，js用来控制器显示与隐藏的。显示与隐藏通常有两种方法实现：1，用js控制其显示属性；2，用js控制其大小。

今天要说的就是通过控制其大小来实现元素的显隐，原理：为其注册鼠标移入、移出的事件，当鼠标移出对象范围，将其宽度设为1，当鼠标再次移入该对象，将其宽度还原。很简单，我们一起看看吧！

隐藏状态：

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

显示状态：

当鼠标滑到左边的悬浮框上，悬浮框就又显示出来了。

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>

JS代码：

<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";

         })();

}

</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>

用悬浮框来显示一些信息，当需要看的时候，指向它，它就会乖乖的出来，很方便；当不需要的时候鼠标移开，它又会很识趣的自己默默离开。虽然很简单，但是却有不错的用户体验，做出让用户用着舒服的东西，是我们不变的追求。

菜鸟学JS（三）——自动隐藏的悬浮框的更多相关文章

  1. 菜鸟学JS（五）——window.onload与$(document).ready()

    我们继续说JS,我们常常在页面加载完成以后做一些操作,比如一些元素的显示与隐藏.一些动画效果.我们通常有两种方法来完成这个事情,一个就是window.onload事件,另一个就是JQuery的read ...

  2. 菜鸟学JS（四）——javascript为按钮注册回车事件（设置默认按钮）

    不得不说,在JS方面,自己真的是个不折不扣的菜鸟.对于JS以及一些JS框架如JQuery等JS框架,自己也只是处在简单应用的阶段,当然自己也在不断的学习当中,希望将来能跟大家分享更多JS方面的心得.今 ...

  3. (转)在网页中JS函数自动执行常用三种方法

    原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...

  4. 在网页中JS函数自动执行常用三种方法

    在网页中JS函数自动执行常用三种方法 在HTML中的Head区域中,有如下函数: <SCRIPT   LANGUAGE="JavaScript">   function ...

  5. 【JS】【3】标签显示几秒后自动隐藏

    $("#XXX").show().delay(2000).hide(0); 2000,0:可选,速度,(毫秒:"slow":"fast") ...

  6. 菜鸟学自动化测试（八）----selenium 2.0环境搭建（基于maven）

    菜鸟学自动化测试(八)----selenium 2.0环境搭建(基于maven) 2012-02-04 13:11 by 虫师, 11419 阅读, 5 评论, 收藏, 编辑 之前我就讲过一种方试来搭 ...

  7. 菜鸟学IT之四则运算升级版

     菜鸟学IT之四则运算升级版 本次作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2213 团队代码github远程仓库的 ...

  8. 重学js之JavaScript 面向对象的程序设计（创建对象）

    注意: 本文章为 <重学js之JavaScript高级程序设计>系列第五章[JavaScript引用类型]. 关于<重学js之JavaScript高级程序设计>是重新回顾js基 ...

  9. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

随机推荐

  1. AJAX的同步返回结果值

    function makeJQGridDataFromList(url) {     var rowData;     var viewPage = 0;     var viewTotal = 0; ...

  2. Quartz.NET开源作业调度框架系列(一):快速入门step by step-转

    Quartz.NET是一个被广泛使用的开源作业调度框架 , 由于是用C#语言创建,可方便的用于winform和asp.net应用程序中.Quartz.NET提供了巨大的灵活性但又兼具简单性.开发人员可 ...

  3. CSS中position:fixed的相关用法

    CSS中的三大重点知识: 1.float,浮动 2.盒子模型 3.position绝对定位 今天主要写下position中fixed相关知识: position:static,relative,abs ...

  4. （原）ubuntnu中anaconda的g++提示crtbeginS.o:unrecognized relocation

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6950263.html 自从使用anaconda后,方便是方便了,也遇到了很多蛋疼的问题. 这次使用an ...

  5. Emacs中Golang的设置

    欲善其事,先利其器.下面记录一些使用Emacs24做golang开发中的一些有用设置,备忘用. 一,golang中的代码跳转 emacs24的go-mode中默认用godef-describe,god ...

  6. 内存问题排查工具 --- valgrind

    1. 概述 2. Valgrind 3. 内存泄漏监测 3.1. 示例代码 3.2. 编译它 3.3. 用Valgrind监测进程的内存泄漏 4. 悬挂指针 4.1. 示例代码 4.2. Valgri ...

  7. 一行Python

    只要理解了函数式编程,使用神奇的Lambda, 配合列表推导以及复杂一点的判断语句,任何的python 代码都可以转换成一行代码 1.打印九九乘法表 # 打印九九乘法表 print('\n'.join ...

  8. android开发学习---开发一个简易的短信发送器

    一.需求: 开发一个简易的短信发送器,输入:对方手机号码,短信内容,点击发送按钮,短信发送成功,对方手机成功收到短信. 其中要求短信内容过长时可以自动拆分,长度英文是160个英文,中文是70个,中英混 ...

  9. YAML 语言教程(转载)

    用YAML语言读取配置是最快的,之前的suricata中用yaml读取了配置,并且在代码运行期间,对配置进行了维护,所以抽点时间,来了解一下YAML语言编程,下文虽然对YAML语言和JAVAScrip ...

  10. linux运维常见英文报错中文翻译(菜鸟必知)

    linux常见英文报错中文翻译(菜鸟必知) 1.command not found  命令没有找到 2.No such file or directory  没有这个文件或目录 3.Permissio ...