html输入框特效无效,jquery输入框键入文字动画特效

这是一款炫酷的jquery输入框键入文字动画特效。该文字特效在用户键入字母时，通过jquery代码来制作文字的动画效果，非常炫酷。

使用方法

在页面中引入style.css和jquery文件。

HTML结构

该输入框键入文字动画特效的基本HTML结果如下：

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("" + c + "");

$(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]

});

});