phAnimate是一款简单实用的jQuery表单输入框浮动标签动画特效插件。通过该插件,你可以非常轻松的为表单input元素添加浮动标签动画效果。
使用方法
在页面中引入jquery和phanimate.jquery.js文件。
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/phanimate.jquery.js"></script>
HTML结构
为<input>
元素设置一个<label>
元素作为它的标签。并使用一个<div>
元素将它们包裹起来。
<div class="custom-input"> <label for="test">Test 1</label> <input type="text" class="form-control" id="test"> </div>
CSS样式
为包裹的div
元素设置定位方式为相对定位,一个一些内边距和外边距。
.custom-input { position: relative; padding-top: 20px; margin-bottom: 10px; }
标签label
元素实用绝对定位,top
和left属性的值分别设置为15像素和27像素。并为所有的动画属性执行0.3秒的ease效果过渡动画。
.custom-input input { padding-left: 15px; } .custom-input label { cursor: text; margin: 0; padding: 0; left: 15px; top: 27px; position: absolute; font-size: 14px; color: #ccc; font-weight: normal; transition: all .3s ease; }
当输入框被聚焦的时候,标签会被添加.active
class类,该class类会将它的top
和left属性的值修改为0。另外.focusIn
class类用于修改文字的颜色。
.custom-input label.active { top: 0; left: 0; font-size: 12px; } .custom-input label.active.focusIn { color: #66afe9; }
初始化插件
在页面DOM元素加载完毕之后,可以通过phAnim()
方法来初始化该浮动标签插件。
$(document).ready(function() { $('.custom-input input').phAnim(); }
phAnimate浮动标签插件的github地址为:https://github.com/andrei90vs/phAnimate。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!