输入框打字冒光特效

PROMULGATOR

　未闻花名°

上海市闵行区

← 选项卡（选择相应的div）

→ 触摸元素使其他元素变模糊纯CSS3

相关代码

输入框打字冒光特效

代码模拟打字效果

jquery打字效果

css3 打字效果

原生js打字效果(修正)

打字文字效果

Html

Css

Js

(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="' + e + '" height="' + t + '" />').appendTo(n).css({
            position: "absolute",
            left: -20,
            top: -44,
            zIndex: 999,
            pointerEvents: "none"
        }), s = i[0].getContext("2d"), r = $("<div />").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)",
            "-o-transform": "translate(-1px, 1px)",
            transform: "translate(-1px, 1px)"
        }), setTimeout(function() {
            t.css({
                "-webkit-transform": "none",
                "-moz-transform": "none",
                "-o-transform": "none",
                transform: "none"
            })
        }, 10)
    })
})();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3

立即下载

输入框打字冒光特效



代码描述：打字冒光特效

输入框打字冒光特效

5

最新

发表评论全部评论

暂时没有评论！

阿阳0

2017/7/17 9:53:03

哒哒哒哒哒哒冒蓝火的
回复

ユメノ0

2017/5/22 18:31:03

厉害
回复

YYYYYYYZYYY0

2017/5/11 9:07:23

这个bug严重

遇おあ而记起0

2017/5/17 15:05:50

顶起~

回复

d.0

2017/5/10 21:19:55

好溜，希望我有一天也能写出让人惊叹的效果。
回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>输入框打字冒光特效-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号