首页 web前端 js教程 js怎么给输入框增加动画效果

js怎么给输入框增加动画效果

Apr 17, 2018 pm 04:41 PM
javascript 动画 效果

这次给大家带来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中文网其它相关文章!

推荐阅读:

angularJS Ionic实现移动端图片上传功能

BootStrap Validator在JS中操作校验功能

JS自定义状态栏动画文字

以上是js怎么给输入框增加动画效果的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

用户遭遇罕见故障 三星 Watch 智能手表突现白屏问题 用户遭遇罕见故障 三星 Watch 智能手表突现白屏问题 Apr 03, 2024 am 08:13 AM

你可能遇到过智能手机屏幕出现绿色线条的问题,即使没见过,也一定在网络上看到过相关图片。那么,智能手表屏幕变白的情况你遇见过吗?4月2日,CNMO从外媒了解到,一名Reddit用户在社交平台上分享了一张图片,展示了三星Watch系列智能手表屏幕变白的情况。该用户写道:"我离开时正在充电,回来时就这样了,我尝试重启,但重启过程中屏幕还是这样。"三星Watch智能手表屏幕变白这位Reddit用户并未指明这款智能手表的具体型号。不过,从图片上看,应该是三星Watch5。此前,另一位Reddit用户也报告

动画不工作在PowerPoint中[修复] 动画不工作在PowerPoint中[修复] Feb 19, 2024 am 11:12 AM

您是否正在尝试制作演示文稿,但无法添加动画?如果动画在你的WindowsPC上的PowerPoint中不起作用,那么这篇文章将会帮助你。这是一个常见的问题,许多人都在抱怨。例如,在Microsoft团队中演示或在屏幕录制期间,动画可能会停止工作。在本指南中,我们将探索各种故障排除技术,以帮助您修复在Windows上的PowerPoint中无法运行的动画。为什么我的PowerPoint动画不起作用?我们注意到可能导致Windows上PowerPoint中的动画无法工作问题的一些可能原因如下:由于个

ppt动画如何设置先进入再退出 ppt动画如何设置先进入再退出 Mar 20, 2024 am 09:30 AM

我们在日常的办公中经常会使用到ppt,那么你是否对ppt里边的每个操作功能都很了解呢?例如:ppt中怎么设置动画效果、怎么设置切换效果、每个动画的效果时长是多少?每个幻灯片能不能自动播放、ppt动画先进入再退出等等,那么今天这期我就先跟大家分享ppt动画先进入再退出的具体操作步骤,就在下方,小伙伴们快来看一看吧!1.首先,我们在电脑中打开ppt,单击文本框外侧选中文本框,(如下图红色圈出部分所示)。2.然后,单击菜单栏中的【动画】,选中【擦除】的效果,(如图红色圈出部分所示)。3.接下来,单击【

九州风神阿萨辛 4S 散热器评测 风冷'刺客大师”范儿 九州风神阿萨辛 4S 散热器评测 风冷'刺客大师”范儿 Mar 28, 2024 am 11:11 AM

说起阿萨辛ASSASSIN,相信玩家们一定会想到《刺客信条》中的各位刺客大师,不仅身手了得,而且"躬身于黑暗、服务于光明"的信条,与国内知名机箱/电源/散热器品牌九州风神(DeepCool)旗下的阿萨辛ASSASSIN系列旗舰级风冷散热器不谋而合。最近,该系列的最新产品阿萨辛ASSASSIN4S重磅上线,"西装刺客,再进阶"为高级玩家带来全新的风冷散热体验。外观一览细节满满阿萨辛4S散热器采用双塔构造+单风扇内嵌设计,外面包覆立方体造型的整流罩,整体感极强,并提供白、黑两种配色可选,满足不同色系

跳票 2 年,国产 3D 动画电影《二郎神之深海蛟龙》定档 7 月 13 日 跳票 2 年,国产 3D 动画电影《二郎神之深海蛟龙》定档 7 月 13 日 Jan 26, 2024 am 09:42 AM

本站1月26日消息,国产3D动画电影《二郎神之深海蛟龙》发布一组最新剧照,正式宣布将于7月13日上映。据了解,《二郎神之深海蛟龙》是由迷狐星(北京)动漫有限公司、霍尔果斯众合千澄影业有限公司、浙江横店影业有限公司、浙江共赢影业有限公司、成都天火科技有限公司、华文映像(北京)影业有限公司出品,王君执导的动画电影,原定2022年7月22日在中国大陆上映。本站剧情简介:封神之战后,姜子牙携“封神榜”分封诸神,而后封神榜被天庭密封于九州秘境深海之下。事实上,除了分封神位,封神榜中还封缄着众多强大的妖邪元

春日里的精致光影艺术,哈趣 H2 性价比之选 春日里的精致光影艺术,哈趣 H2 性价比之选 Apr 17, 2024 pm 05:07 PM

随着春天的到来,万物复苏,一切都充满了生机与活力。在这个美好的季节里,如何为家居生活增添一抹别样的色彩?哈趣H2投影仪,以其精致的设计和超高的性价比,成为了这个春天里不可或缺的一道亮丽风景。这款H2投影仪小巧玲珑却不失时尚。无论是放在客厅的电视柜上,还是卧室的床头柜旁,都能成为一道亮丽的风景线。它的机身采用了奶白色的磨砂质地,这种设计不仅让投影仪的外观更显高级,同时也增加了触感的舒适度。米色仿皮纹材质,更是为整体外观增添了一抹温馨与雅致。这种色彩与材质的搭配,既符合现代家居的审美趋势,又能够融入

航嘉 MX750P 全模组电源评测:750W 的白金实力浓缩 航嘉 MX750P 全模组电源评测:750W 的白金实力浓缩 Mar 28, 2024 pm 03:20 PM

ITX平台以小巧的身形吸引了不少追求极致和独特美感的玩家,随着制程的提升和技术的进步,英特尔第14代酷睿和RTX40系显卡都可以在ITX平台中发挥实力,游戏玩家也对SFX电源有了更高的要求。游戏爱好者航嘉推出新的MX系列电源,在满足高性能需求的ITX平台中,MX750P全模组电源的定额功率高达750W,同时通过了80PLUS白金级认证。以下我们就带来这款电源的评测。航嘉MX750P全模组电源采用了简约时尚的设计理念,共有黑白两款供玩家选择,均采用磨砂表面处理,搭配银灰色和红色的字体有很好的质感,

七彩虹隐星 P15 24 评测:颜值性能兼具的硬核全能游戏本 七彩虹隐星 P15 24 评测:颜值性能兼具的硬核全能游戏本 Mar 06, 2024 pm 04:40 PM

在当下科技飞速发展的时代,笔记本电脑已经成为人们日常生活和工作中不可或缺的重要工具。对于那些对性能有高要求的玩家而言,拥有配置强大、性能出色的笔记本电脑才能满足其硬核需求。七彩虹隐星P15笔记本电脑凭借其卓越性能和令人惊艳的设计,成为了未来的引领者,堪称硬核笔记本的典范。七彩虹隐星P1524配备了13代英特尔酷睿i7处理器和RTX4060LaptopGPU,外观采用更时尚的宇宙飞船设计风格,同时在细节表现上也有出色表现。让我们先来了解一下这款笔记本的特点。至高搭载英特尔酷睿i7-13620H处理

See all articles