jQuery打字动画文本占位符特效代码

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

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

以下是 jQuery打字动画文本占位符特效代码的示例演示效果:

当前平台(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>

<style type="text/css">
	body{
		background: #494A5F;
		color: #D5D6E2;
		font-weight: 500;
		font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
	}
	a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}
	a:hover,a:focus{color:#74777b;text-decoration: none;}
	.wrapper {
		  height: 60px;
		  width: 460px;
		  border-radius: 4px;
		  box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
		  position: absolute;
		  top: 20%;
		  left: 50%;
		  margin-left: -230px;
		  margin-top: -30px;
		}

		.inputbox {
		  box-sizing: border-box;
		  width: 400px;
		  height: 100%;
		  font-size: 22px;
		  background-color: #FFFFFF;
		  border: 2px solid #E1E8ED;
		  border-right: 0;
		  border-radius: 4px 0 0 4px;
		  padding: 10px;
		  float: left;
		  display: block;
		}

		.submit {
		  height: 100%;
		  width: 60px;
		  float: left;
		  border: 2px solid #E1E8ED;
		  border-left: 0;
		  box-sizing: border-box;
		  background-color: #FFFFFF;

		  border-radius: 0 4px 4px 0;
		  text-indent: -200em;
		  overflow: hidden;
		  display: block;
		  cursor: pointer;

		  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNy43NSAzNy43NSI+PHBhdGggZD0iTTQyLjA4LDM3LjYxbC04LjItOC4yLS4xNC0uMTFhMTUuNTMsMTUuNTMsMCwxLDAtNC40NCw0LjQ0cy4wNy4xLjExLjE0bDguMiw4LjJhMy4xNSwzLjE1LDAsMSwwLDQuNDYtNC40NlptLTIxLjMxLTYuN0ExMC4xNCwxMC4xNCwwLDEsMSwzMC45MSwyMC43NywxMC4xNCwxMC4xNCwwLDAsMSwyMC43NywzMC45MVptMCwwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNS4yNSAtNS4yNSkiIHN0eWxlPSJmaWxsOiM1ODU4NTg7ZmlsbC1ydWxlOmV2ZW5vZGQiLz48L3N2Zz4=);
		  -webkit-background-size: 28px auto;
		  background-size: 28px auto;
		  background-repeat: no-repeat;
		  background-position: center center;

		}

		input:focus {
		  outline: none;
		}
</style>

</head>
<body>
<form class="wrapper">
	<input class="inputbox" type="text" name="search" id="search">
	<input class="submit" type="submit" value="Search">
</form>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/placeholderTypewriter.js"></script>
<script type="text/javascript">
	$('#search').placeholderTypewriter({
		text: ["#", "wolcome", "Paris?", "Berlin?", "London?", "New York?", "San Francisco?"]
	});
</script>
</body>
</html>

JS代码(placeholderTypewriter.js):

/* jQuery placeholderTypewriter plugin =================================== Author:Bjoern Diekert <https://github.com/bdiekert> Version:1.0 License:Unlicense <http://unlicense.org> */
(function ($){
	"use strict";
	$.fn.placeholderTypewriter = function (options){
	// Plugin Settings var settings = $.extend({
	delay:50,pause:1000,text:[]}
,options);
	// Type given string in placeholder function typeString($target,index,cursorPosition,callback){
	// Get text var text = settings.text[index];
	// Get placeholder,type next character var placeholder = $target.attr('placeholder');
	$target.attr('placeholder',placeholder + text[cursorPosition]);
	// Type next character if (cursorPosition < text.length - 1){
	setTimeout(function (){
	typeString($target,index,cursorPosition + 1,callback);
}
,settings.delay);
	return true;
}
// Callback if animation is finished callback();
}
// Delete string in placeholder function deleteString($target,callback){
	// Get placeholder var placeholder = $target.attr('placeholder');
	var length = placeholder.length;
	// Delete last character $target.attr('placeholder',placeholder.substr(0,length - 1));
	// Delete next character if (length > 1){
	setTimeout(function (){
	deleteString($target,callback)}
,settings.delay);
	return true;
}
// Callback if animation is finished callback();
}
// Loop typing animation function loopTyping($target,index){
	// Clear Placeholder $target.attr('placeholder','');
	// Type string typeString($target,index,0,function (){
	// Pause before deleting string setTimeout(function (){
	// Delete string deleteString($target,function (){
	// Start loop over loopTyping($target,(index + 1) % settings.text.length)}
)}
,settings.pause);
}
)}
// Run placeholderTypewriter on every given field return this.each(function (){
	loopTyping($(this),0);
}
);
}
;
}
(jQuery));

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