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中的关于类型转换的性能优化
Dec 14 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
JS处理一些简单计算题
Feb 24 Javascript
vue路由跳转传参数的方法
May 06 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
react MPA 多页配置详解
Oct 18 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 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中session定期自动清理的方法
2015/11/12 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
python设计模式大全
2016/06/27 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
python读取xml文件方法解析
2020/08/04 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
幼儿园家长会邀请函
2014/01/15 职场文书
人事专员职责
2014/02/22 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
企业职业病防治方案
2014/05/29 职场文书
应聘教师求职信
2014/07/19 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
行政处罚听证告知书
2015/07/01 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers