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 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
js window.onload 加载多个函数的方法
Nov 02 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
小程序api实现promise封装过程解析
Nov 21 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
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php分页代码学习示例分享
2014/02/20 PHP
php实现的操作excel类详解
2016/01/15 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
开门红主持词
2014/04/02 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
联片教研活动总结
2014/07/01 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
小学见习报告
2014/10/31 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
Java中的随机数Random
2022/03/17 Java/Android