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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
javascript实现贪吃蛇小游戏
Jul 28 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数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
javascript天然的迭代器
2010/10/29 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python实现批量下载图片的方法
2015/07/08 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
python中while和for的区别总结
2019/06/28 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
python中entry用法讲解
2020/12/04 Python
python实现经纬度采样的示例代码
2020/12/10 Python
消防安全员岗位职责
2014/03/10 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
php实例化对象的实例方法
2021/11/17 PHP