jquery占位符动画插件Placeholdem代码

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

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

以下是 jquery占位符动画插件Placeholdem代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
	<head>
		<meta charset="gb2312" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<link href="assets/css/style.min.css" rel="stylesheet" />
		<title>jquery占位符动画插件Placeholdem</title>
	</head>
	<body>
		<div class="container">
			<h3 class="fade">Try It</h3>
			<form>
				<label class="fade">
					<input name="field1" placeholder="Triggered on Focus/Blur" />
					<div class="arrow"></div>
				</label>
				<label class="fade">
					<textarea name="field2" placeholder="Inputs or Textareas"></textarea>
					<div class="arrow"></div>
				</label>
			</form>
		</div>
		<script src="placeholdem.min.js"></script>
		<script>
			Placeholdem( document.querySelectorAll( '[placeholder]' ) );

			var fadeElems = document.body.querySelectorAll( '.fade' ),
				fadeElemsLength = fadeElems.length,
				i = 0,
				interval = 50;

				function incFade() {
					if( i < fadeElemsLength ) {
						fadeElems[ i ].className += ' fade-load';
						i++;
						setTimeout( incFade, interval );
					}
				}

				setTimeout( incFade, interval );
		</script>
</body>
</html>

JS代码(gulpfile.js):

// Load pluginsvar gulp = require('gulp'),sass = require('gulp-ruby-sass'),autoprefixer = require('gulp-autoprefixer'),minifycss = require('gulp-minify-css'),jshint = require('gulp-jshint'),uglify = require('gulp-uglify'),rename = require('gulp-rename'),watch = require('gulp-watch');
	plumber = require('gulp-plumber');
	header = require('gulp-header');
	gulp.task('default',function(){
	var pkg = require('./package.json');
	var banner = ['/**',' * <%= pkg.name %> - <%= pkg.description %>',' * v<%= pkg.version %> - <%= pkg.license %> License',' * <%= pkg.homepage %> - <%= pkg.repository.url %>',' * by <%= pkg.author.name %> - @jackrugile',' */
','',''].join('\n');
	gulp.src('assets/scss/style.scss').pipe(watch()).pipe(plumber()).pipe(sass({
	style:'expanded',lineNumbers:true}
)).pipe(autoprefixer('last 2 version','safari 5','ie 8','ie 9','opera 12.1','ios 6','android 4')).pipe(gulp.dest('assets/css')).pipe(rename({
	suffix:'.min'}
)).pipe(minifycss()).pipe(gulp.dest('assets/css'))gulp.src('placeholdem.js').pipe(watch()).pipe(plumber()).pipe(jshint()).pipe(jshint.reporter('default')).pipe(rename({
	suffix:'.min'}
)).pipe(uglify()).pipe(header(banner,{
	pkg:pkg}
)).pipe(gulp.dest(''))}
);

JS代码(placeholdem.min.js):

/** * Placeholdem - Placeholder Caret Animation * v1.0.1 - MIT License * http://placeholdem.jackrugile.com - git://github.com/jackrugile/placeholdem.git * by Jack Rugile - @jackrugile */
function Placeholdem(e){
	"use strict";
	!function(){
	for(var e=0,n=["ms","moz","webkit","o"],a=0;
	a<n.length&&!window.requestAnimationFrame;
	++a)window.requestAnimationFrame=window[n[a]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[n[a]+"CancelAnimationFrame"]||window[n[a]+"CancelRequestAnimationFrame"];
	window.requestAnimationFrame||(window.requestAnimationFrame=function(n){
	var a=(new Date).getTime(),i=Math.max(0,16-(a-e)),l=window.setTimeout(function(){
	n(a+i)}
,i);
	return e=a+i,l}
),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(e){
	clearTimeout(e)}
)}
();
	var n={
}
;
	return n.init=function(){
	if(n.elems=[],e&&e.length)for(var a=0;
	a<e.length;
	a++)n.hasPlaceholder(e[a])&&n.elems.push(new n.PlaceholdemElem(e[a]));
	else e&&n.hasPlaceholder(e)&&n.elems.push(new n.PlaceholdemElem(e))}
,n.hasPlaceholder=function(e){
	return"function"==typeof e.hasAttribute&&e.hasAttribute("placeholder")}
,n.PlaceholdemElem=function(e){
	var n=this;
	n.init=function(){
	n.elem=e,n.placeholder=n.elem.getAttribute("placeholder"),n.elem.removeAttribute("placeholder"),n.rAF=null,n.animating=0,n.elem.value||(n.elem.value=n.placeholder),n.on(n.elem,"focus",n.onFocus),n.on(n.elem,"blur",n.onBlur),n.on(n.elem,"keydown",n.onKeydown)}
,n.on=function(e,n,a){
	e.addEventListener?e.addEventListener(n,a):e.attachEvent("on"+n,a)}
,n.onFocus=function(){
	(n.animating||n.elem.value===n.placeholder)&&(n.animating=1,window.cancelAnimationFrame(n.rAF),n.deletePlaceholder())}
,n.onBlur=function(){
	(n.animating||""===n.elem.value)&&(n.animating=1,window.cancelAnimationFrame(n.rAF),n.restorePlaceholder())}
,n.onKeydown=function(){
	n.animating&&(n.animating=0,window.cancelAnimationFrame(n.rAF),n.elem.value="")}
,n.deletePlaceholder=function(){
	n.elem.value.length>0?(n.elem.value=n.elem.value.slice(0,-1),n.rAF=window.requestAnimationFrame(n.deletePlaceholder)):n.animating=0}
,n.restorePlaceholder=function(){
	n.elem.value.length<n.placeholder.length?(n.elem.value+=n.placeholder[n.elem.value.length],n.rAF=window.requestAnimationFrame(n.restorePlaceholder)):n.animating=0}
,n.init()}
,n.init(),n}

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