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 相关文章推荐
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
Node.js实现断点续传
Jun 23 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中一个有意思的日期逻辑处理
2012/03/25 PHP
PHP抽象类 介绍
2012/06/13 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
使用js画图之画切线
2015/01/12 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
电力公司个人求职信范文
2014/02/04 职场文书
会计岗位职责范本
2014/03/07 职场文书
自我管理的活动方案
2014/08/25 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
python中urllib包的网络请求教程
2022/04/19 Python