菜鸟学JS——自动隐藏的悬浮框

今天写一个小实例，用js和css写一个可以自动隐藏的悬浮框。css肯定是用来控制样式的，js用来控制器显示与隐藏的。显示与隐藏通常有两种方法实现：1，用js控制其显示属性；2，用js控制其大小。

 

今天要说的就是通过控制其大小来实现元素的显隐，原理：为其注册鼠标移入、移出的事件，当鼠标移出对象范围，将其宽度设为1，当鼠标再次移入该对象，将其宽度还原。很简单，我们一起看看吧！

 

隐藏状态：

左边那一条窄线就是隐藏以后的悬浮框。

 

显示状态：

当鼠标滑到左边的悬浮框上，悬浮框就又显示出来了。

 

CSS样式：

JS代码：

HTML代码：

 

	
学生信息
	

		学号：0123456789 


		姓名：小明 


		学院：软件学院 


		专业：软件工程


		班级：一班


	

用悬浮框来显示一些信息，当需要看的时候，指向它，它就会乖乖的出来，很方便；当不需要的时候鼠标移开，它又会很识趣的自己默默离开。虽然很简单，但是却有不错的用户体验，做出让用户用着舒服的东西，是我们不变的追求。