집 > 기사 > 웹 프론트엔드 > js의 입력 상자에 애니메이션 효과를 추가하는 방법
js의 입력 상자에 애니메이션 효과를 추가하는 방법

php中世界最好的语言원래의: 2018-04-17 16:41:351518검색
이번에는 js를 사용하여 입력 상자에 애니메이션 효과를 추가하는 방법을 보여 드리겠습니다. js를 사용하여 입력 상자에 애니메이션 효과를 추가할 때 주의 사항은 무엇입니까?
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body >
<p id="header">
    <form class="form" >
        <input type="text" class="input_key" maxlength="100" autocomplete="on">
    </form>
</p>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
    (function() {
        function p() {
            window.requestAnimFrame(p), a = d(0, 360), s.globalCompositeOperation = "destination-out", s.fillStyle = "rgba(0, 0, 0, 0.5)", s.fillRect(0, 0, e, t), s.globalCompositeOperation = "source-over";
            var n = u.length;
            while (n--) u[n].draw(), u[n].update(n)
        }
        function d(e, t) {
            return Math.random() * (t - e) + e
        }
        function v() {
            i = $('<canvas width="&#39; + e + &#39;" height="&#39; + t + &#39;" />').appendTo(n).css({
                position: "absolute",
                left: -20,
                top: -44,
                zIndex: 999,
                pointerEvents: "none"
            }), s = i[0].getContext("2d"), r = $("<p />").appendTo(n).css({
                fontSize: "16px",
                fontFamily: "arial",
                height: 1,
                position: "absolute",
                left: 15,
                top: 50,
                zIndex: 0,
                visibility: "hidden",
                whiteSpace: "nowrap"
            })
        }
        if (/msie/i.test(navigator.userAgent)) return;
        var e = 600,
                t = 100,
                n = $("#header .form"),
                r = null,
                i = null,
                s = null,
                o = !1,
                u = [],
                a = 120,
                f = 8,
                l = 0,
                c = 0,
                h = function(e, t, n) {
                    var r = this;
                    r.x = e, r.y = t, r.dir = n, r.coord = {}, r.angle = d(0, -Math.PI), r.speed = d(2, 8), r.friction = .95, r.gravity = 1, r.hue = d(a - 10, a + 10), r.brightness = d(50, 80), r.alpha = 1, r.decay = d(.03, .05), r.init()
                };
        h.prototype = {
            init: function() {
                var e = this;
                e.coord = {
                    x: e.x,
                    y: e.y
                }
            },
            update: function(e) {
                var t = this;
                t.coord = {
                    x: t.x,
                    y: t.y
                }, t.speed *= t.friction, t.x += Math.cos(t.angle) * t.speed + t.dir, t.y += Math.sin(t.angle) * t.speed + t.gravity, t.alpha -= t.decay, t.alpha <= t.decay && u.splice(e, 1)
            },
            draw: function() {
                var e = this;
                s.fillStyle = "hsla(" + e.hue + ", 100%, " + e.brightness + "%, " + e.alpha + ")", s.beginPath(), s.arc(e.coord.x, e.coord.y, 2, 0, 2 * Math.PI, !0), s.closePath(), s.fill()
            }
        }, window.requestAnimFrame = function() {
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || function(e) {
                window.setTimeout(e, 1e3 / 60)
            }
        }(), $(".input_key").on("focus", function() {
            o || (v(), o = !0, p());
            var e = $(this.form),
                    t = -20,
                    n = -44;
            i.appendTo(e), e.attr("name") == "f3" && ($("body").hasClass("layout1") ? t = 97 : t = -20), i.css({
                left: t,
                top: n
            })
        }).on("keydown", function(e) {
            var t = $(this.form);
            if (!(this.selectionStart >= 0 && r)) return;
            var n = this.selectionStart,
                    i = this.value.substring(0, n).replace(/ /g, " "),
                    s = r.html(i).width(),
                    o = 0;
            i.length > c ? o = -2 : o = 2, c = i.length, s >= 500 && (s = 500);
            var a = f;
            while (a--) u.push(new h(s + 50, 60, o));
//  这里是控制输入框都抖动的
            t.css({
                "-webkit-transform": "translate(-1px, 1px)",
                "-moz-transform": "translate(-1px, 1px)",
                "-MS-transform": "translate(-1px, 1px)",
                "-o-transform": "translate(-1px, 1px)",
                transform: "translate(-1px, 1px)"
            }),
                    setTimeout(function() {
                t.css({
                    "-webkit-transform": "none",
                    "-moz-transform": "none",
                    "-MS-transform": "none",
                    "-o-transform": "none",
                    transform: "none"
                })
            }, 10)
        })
    })();
</script>
</body>
</html>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!