js和css写一个可以自动隐藏的悬浮框


Posted in Javascript onMarch 05, 2014

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

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

隐藏状态:

js和css写一个可以自动隐藏的悬浮框 

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

显示状态:
js和css写一个可以自动隐藏的悬浮框 

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

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"; 
})(); 
<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>

用悬浮框来显示一些信息,当需要看的时候,指向它,它就会乖乖的出来,很方便;当不需要的时候鼠标移开,它又会很识趣的自己默默离开。虽然很简单,但是却有不错的用户体验,做出让用户用着舒服的东西,是我们不变的追求。
Javascript 相关文章推荐
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
7个JS基础知识总结
Mar 05 #Javascript
100个不能错过的实用JS自定义函数
Mar 05 #Javascript
jQuery DOM操作实例
Mar 05 #Javascript
JS父页面与子页面相互传值方法
Mar 05 #Javascript
JS和函数式语言的三特性
Mar 05 #Javascript
jquery 使用简明教程
Mar 05 #Javascript
jquery form表单序列化为对象的示例代码
Mar 05 #Javascript
You might like
如何删除多级目录
2006/10/09 PHP
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
php生成验证码函数
2015/10/20 PHP
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
javascript操作css属性
2013/12/30 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
详解Vue 全局变量,局部变量
2019/04/17 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
Python 正则表达式操作指南
2009/05/04 Python
python的re正则表达式实例代码
2018/01/24 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
银行财务部实习生的自我鉴定
2013/11/27 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
党员干部承诺书范文
2014/03/25 职场文书
期中考试反思800字
2014/05/01 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
培训研修方案
2014/06/06 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
办理房产证委托书
2014/09/18 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
机械生产实习心得体会
2016/01/22 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
MySQL 数据丢失排查案例
2021/05/08 MySQL
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL