文本/链接
输入框键入文字动画jQuery特效
PetitQ
这是一款炫酷的 jquery 输入框键入文字动画特效。该文字特效在用户键入字母时，通过 jquery 代码来制作文字的动画效果，非常炫酷。
使用方法
在页面中引入 style.css 和 jquery 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="path/to/jquery.min.js" type="text/javascript"></script>
HTML 结构
该输入框键入文字动画特效的基本 HTML 结果如下：
<form>
<div class="input_wrap">
<input type="text" placeholder="Please type" />
<div class="after"></div>
</div>
</form>
JavaScript
下面是该文字动画的 jquery 插件代码。
(function($) {
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}$.fn.animChars = function(options) {
var params = $.extend(
{duration: 1,
upperLimit: 150,
sizeInterval: [15, 80]
},
options
);
$(this).keypress(function(e) {
console.log(this.selectionStart)
var rand = getRandomInt(1, 9);
var randP = Math.floor(Math.random() * 10);
randP < 5 ? (randP = rand) : (randP = rand - rand * 2);
var c = String.fromCharCode(e.which);
$(this).parent().append("<span class='cl" + rand + "'>" + c + "</span>");
$(this)
.parent()
.find("span.cl" + rand + "")
.css({
left: getRandomInt(0, 90) + "%",
"font-size": getRandomInt(
params.sizeInterval[0],
params.sizeInterval[1]
)})
.fadeIn(100, function() {
$(this)
.css({
"margin-bottom": getRandomInt(
params.upperLimit - params.upperLimit / 2
? params.upperLimit / 2
: 0,
params.upperLimit),
"margin-left": randP * 10
})
.fadeOut(params.duration * 1000, function() {
$(this).remove();
});
});
});
};
})(jQuery);
最后在页面 DOM 元素加载完毕之后，通过下面的代码来初始化该文字动画插件。
$(document).ready(function() {
$("input").animChars({
duration: 0.8,
upperLimit: 200,
sizeInterval: [15, 80]
});
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
