在 Material Design 风格中，浮动标签效果是一种非常常见的界面设计，它可以提高用户体验和操作性。本文将介绍如何在前端实现这种效果。
前置知识
在实现浮动标签效果之前，需要掌握以下知识：
- HTML 和 CSS 基础知识
- JavaScript 基础知识
- jQuery 基础知识
实现方法
实现浮动标签效果的方法有很多种，本文介绍一种基于 jQuery 的实现方法。
HTML 结构
首先，我们需要准备一些 HTML 结构：
<div class="form-group"> <label for="input">用户名</label> <input type="text" id="input" name="username"> </div>
这里，我们使用了 Bootstrap 的 form-group 类作为容器，并在容器中放置了一个 label 和一个 input。
CSS 样式
接下来，我们需要为 label 和 input 添加一些 CSS 样式：
-- -------------------- ---- ------- ----------- - --------- --------- -------------- ----- - ----- - --------- --------- ---- -- ----- -- ---------- ----- ------------ ---- ------ -------- ----------- --- ---- --------- ----------------- --- ----- - ----- - ------------ ------- - ----------- - ------ ----------------------------- - ----- - ---------- ----------------- ----------- ------ -------- -
这里，我们为 label 设置了绝对定位，并将其放置在 input 的上方。然后，为 label 添加了一些过渡效果和变换效果，以实现浮动标签的效果。
JavaScript 代码
最后，我们需要使用 jQuery 来实现 input 获得焦点和输入内容时，label 浮动的效果：
-- -------------------- ---- -------
---------------------------- -
-------------------- ---- ------- ---------- -
----------------------------
----------------- ---------- -
--- ----- - ----------------------
-- ----------- --- --- -
----------------------------
- ---- -
-------------------------
-
-----------------------
---这里，我们使用了 jQuery 的 on() 方法来监听 input 元素的 focus、blur 和 input 事件。当 input 获得焦点、失去焦点或输入内容时，就触发 checkval 事件。在 checkval 事件中，我们获取 input 前面的 label 元素，并根据 input 的值是否为空来添加或移除 active 类，以实现浮动标签的效果。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------ ----------------------
----- ---------------- ---------------------------------------------------------------------------------------
-------
----------- -
--------- ---------
-------------- -----
-
----- -
--------- ---------
---- --
----- --
---------- -----
------------ ----
------ --------
----------- --- ---- ---------
----------------- --- -----
-
----- -
------------ -------
-
----------- - ------
----------------------------- - ----- -
---------- ----------------- -----------
------ --------
-
--------
-------
------
---- ---------------- ------
---- -------------------
------ -----------------------
------ ----------- ---------- ----------------
------
------
------- ----------------------------------------------------------------------------
--------
---------------------------- -
-------------------- ---- ------- ---------- -
----------------------------
----------------- ---------- -
--- ----- - ----------------------
-- ----------- --- --- -
----------------------------
- ---- -
-------------------------
-
-----------------------
---
---------
-------
-------总结
本文介绍了在 Material Design 风格下实现浮动标签效果的方法，通过 HTML、CSS 和 JavaScript 的组合，可以实现一个简单而又实用的界面效果。同时，这种方法也可以为开发者提供一种思路，用于实现更加复杂的界面效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f536622b3ccec22fd5a26a