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的滚动新闻列表
Jun 19 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
JavaScript中继承原理与用法实例入门
May 09 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 数组排序方法总结 推荐收藏
2010/06/30 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
python实现斗地主分牌洗牌
2020/06/22 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
岗位职责定义及内容
2013/11/08 职场文书
大学本科毕业生的自我鉴定
2013/11/26 职场文书
小学英语教学反思案例
2014/02/04 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
《学会合作》教学反思
2014/04/12 职场文书
建筑投标担保书
2014/05/20 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
2015年中秋寄语
2015/07/31 职场文书
HAM-2000摩机图
2021/04/22 无线电