html页面写悬浮输入框,简单实用的jQuery表单输入框浮动标签动画特效插件

phAnimate是一款简单实用的jQuery表单输入框浮动标签动画特效插件。通过该插件,你可以非常轻松的为表单input元素添加浮动标签动画效果。

使用方法

在页面中引入jquery和phanimate.jquery.js文件。

HTML结构

为元素设置一个元素作为它的标签。并使用一个

元素将它们包裹起来。

Test 1

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();

}

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值