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 相关文章推荐
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
Javascript writable特性介绍
Feb 27 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
javascript轮播图算法
2016/10/21 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
Python set常用操作函数集锦
2017/11/15 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
Etam德国:内衣精品店
2019/08/25 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
判断单链表中是否存在环
2012/07/16 面试题
儿媳婚宴答谢词
2014/01/14 职场文书
入学申请自荐信范文
2014/02/26 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
中学生操行评语
2014/04/24 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
2014年租房协议书范本
2014/10/30 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
大学体育课感想
2015/08/10 职场文书
售房协议书范本
2015/08/11 职场文书
队名及霸气口号大全
2015/12/25 职场文书
二年级数学教学反思
2016/02/16 职场文书