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中dialog属性小记
Sep 03 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
13个PHP函数超实用
Oct 21 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
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
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
js中return false(阻止)的用法
2013/08/14 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python中实现php的var_dump函数功能
2015/01/21 Python
Python中的rfind()方法使用详解
2015/05/19 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
Python如何实现文本转语音
2016/08/08 Python
Python中is与==判断的区别
2017/03/28 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
怎么快速自学python
2020/06/22 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
校园广播稿100字
2014/10/06 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
2014年学校工作总结
2014/11/20 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
小学生读书笔记范文
2015/06/30 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL