js和css写一个可以自动隐藏的悬浮框_javascript技巧
程序员文章站
2022-05-12 12:46:01
...
今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框。css肯定是用来控制样式的,js用来控制器显示与隐藏的。显示与隐藏通常有两种方法实现:1,用js控制其显示属性;2,用js控制其大小。
今天要说的就是通过控制其大小来实现元素的显隐,原理:为其注册鼠标移入、移出的事件,当鼠标移出对象范围,将其宽度设为1,当鼠标再次移入该对象,将其宽度还原。很简单,我们一起看看吧!
隐藏状态:
左边那一条窄线就是隐藏以后的悬浮框。
显示状态:
当鼠标滑到左边的悬浮框上,悬浮框就又显示出来了。
CSS样式:
JS代码:
HTML代码:
学号:
姓名:
学院:
专业:
班级:
用悬浮框来显示一些信息,当需要看的时候,指向它,它就会乖乖的出来,很方便;当不需要的时候鼠标移开,它又会很识趣的自己默默离开。虽然很简单,但是却有不错的用户体验,做出让用户用着舒服的东西,是我们不变的追求。
今天要说的就是通过控制其大小来实现元素的显隐,原理:为其注册鼠标移入、移出的事件,当鼠标移出对象范围,将其宽度设为1,当鼠标再次移入该对象,将其宽度还原。很简单,我们一起看看吧!
隐藏状态:
左边那一条窄线就是隐藏以后的悬浮框。
显示状态:
当鼠标滑到左边的悬浮框上,悬浮框就又显示出来了。
CSS样式:
复制代码 代码如下:
JS代码:
复制代码 代码如下:
HTML代码:
复制代码 代码如下:
学生信息
学号:
姓名:
学院:
专业:
班级:
用悬浮框来显示一些信息,当需要看的时候,指向它,它就会乖乖的出来,很方便;当不需要的时候鼠标移开,它又会很识趣的自己默默离开。虽然很简单,但是却有不错的用户体验,做出让用户用着舒服的东西,是我们不变的追求。
上一篇: 原生js实现自动轮播图