jQuery表单输入框浮动标签特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery表单输入框浮动标签特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery表单输入框浮动标签特效 </title>
<link rel="stylesheet" href="bootstrap.min.css">
<style type="text/css">
	.container{padding: 1.5em 0;}
	.custom-input {
	  position: relative;
	  padding-top: 20px;
	  margin-bottom: 10px;
	}

	.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;
	}

	.custom-input label.active {
	  top: 0;
	  left: 0;
	  font-size: 12px;
	}

	.custom-input label.active.focusIn {
	  color: #66afe9;
	}
</style>

</head>
<body>
<div class="container">
	<div class="row">
		<div class="custom-input">
		  <label for="firstname">First Name</label>
		  <input type="text" class="form-control" id="firstname">
		</div>

		<div class="custom-input">
		  <label for="test">Test 1</label>
		  <input type="text" class="form-control" id="test">
		</div>

		<div class="custom-input">
		  <label for="test2">Test 2</label>
		  <input type="text" class="form-control" id="test2" placeholder="test 2">
		</div>

		<div class="custom-input">
		  <label>Test 3</label>
		  <input type="text" class="form-control" placeholder="Placeholder 3">
		</div>

		<div class="custom-input">
		  <label>Test 4</label>
		  <input type="text" class="form-control">
		</div>

		<div class="custom-input">
		  <input type="text" class="form-control" placeholder="Test 5">
		</div>
	</div>
</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/phanimate.jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	  $('.custom-input input').phAnim();
	}
</script>
</body>
</html>

JS代码(phanimate.jquery.js):

'use strict';
	(function($){
	$.fn.phAnim = function( options ){
	var settings = $.extend({
}
,options),label,ph;
	function getLabel(input){
	return $(input).parent().find('label');
}
function makeid(){
	var text = "";
	var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
	for( var i=0;
	i < 5;
	i++ ) text += possible.charAt(Math.floor(Math.random() * possible.length));
	return text;
}
return this.each( function(){
	if( $(this).attr('id') == undefined ){
	$(this).attr('id',makeid());
}
if( getLabel($(this)).length == 0 ){
	if( $(this).attr('placeholder') != undefined ){
	ph = $(this).attr('placeholder');
	$(this).attr('placeholder','');
	$(this).parent().prepend('<label for='+ $(this).attr('id') +'>'+ ph +'</label>');
}
}
else{
	$(this).attr('placeholder','');
	if(getLabel($(this)).attr('for') == undefined ){
	getLabel($(this)).attr('for',$(this).attr('id'));
}
}
$(this).on('focus',function(){
	label = getLabel($(this));
	label.addClass('active focusIn');
}
).on('focusout',function(){
	if( $(this).val() == '' ){
	label.removeClass('active');
}
label.removeClass('focusIn');
}
);
}
);
}
;
}
(jQuery));
	$(document).ready(function(){
	$('input').phAnim();
}
);

附件:下载该文件资源,减少时间成本(增值服务)