js怎麼為輸入框增加動畫效果-js教程-PHP中文網

首頁

web前端

js教程

js怎麼為輸入框增加動畫效果

php中世界最好的语言

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中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7758

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1293

PHP教程

1234

Related knowledge

用戶遭遇罕見故障三星 Watch 智慧手錶突現白螢幕問題 Apr 03, 2024 am 08:13 AM

你可能遇到過智慧型手機螢幕出現綠色線條的問題，即使沒看過，也一定在網路上看過相關圖片。那麼，智慧手錶螢幕變白的情況你有遇見過嗎？ 4月2日，CNMO從外媒了解到，一名Reddit用戶在社群平台上分享了一張圖片，展示了三星Watch系列智慧手錶螢幕變白的情況。該用戶寫道："我離開時正在充電，回來時就這樣了，我嘗試重啟，但重啟過程中屏幕還是這樣。"三星Watch智能手錶屏幕變白這位Reddit用戶並未指明這款智能手錶的具體型號。不過，從圖片上看，應該是三星Watch5。此前，另一位Reddit用戶也報告

動畫不工作在PowerPoint中[修復] Feb 19, 2024 am 11:12 AM

您是否正在嘗試製作演示文稿，但無法添加動畫？如果動畫在你的WindowsPC上的PowerPoint中不起作用，那麼這篇文章將會幫助你。這是一個常見的問題，許多人都在抱怨。例如，在Microsoft團隊中演示或在螢幕錄製期間，動畫可能會停止運作。在本指南中，我們將探索各種故障排除技術，以協助您修復在Windows上的PowerPoint中無法運作的動畫。為什麼我的PowerPoint動畫不起作用？我們注意到Windows上PowerPoint中的動畫可能無法運作問題的一些可能原因如下：由於個

九州風神阿薩辛 4S 散熱器評測風冷「刺客大師」範兒 Mar 28, 2024 am 11:11 AM

說起阿薩辛ASSASSIN，相信玩家們一定會想到《刺客信條》中的各位刺客大師，不僅身手了得，而且"躬身於黑暗、服務於光明"的信條，與國內知名機箱/電源/散熱器品牌九州風神（DeepCool）旗下的阿薩辛ASSASSIN系列旗艦級風冷散熱器不謀而合。最近，該系列的最新產品阿薩辛ASSASSIN4S重磅上線，"西裝刺客，再進階"為高級玩家帶來全新的風冷散熱體驗。外觀一覽細節滿滿阿薩辛4S散熱器採用雙塔構造+單風扇內嵌設計，外麵包覆立方體造型的整流罩，整體感極強，並提供白、黑兩種配色可選，滿足不同色系

ppt動畫如何設定先進入再退出 Mar 20, 2024 am 09:30 AM

我們在日常的辦公中常常會使用到ppt，那麼你是否對ppt裡邊的每個操作功能都很了解呢？例如：ppt中怎麼設定動畫效果、怎麼設定切換效果、每個動畫的效果長度是多少？每個投影片能不能自動播放、ppt動畫先進入再退出等等，那麼今天這期我就先跟大家分享ppt動畫先進入再退出的具體操作步驟，就在下方，小伙伴們快來看一看吧！ 1.首先，我們在電腦中開啟ppt，點選文字方塊外側選取文字框，（如下圖紅色圈出部分所示）。 2.然後，點選選單列中的【動畫】，選取【擦除】的效果，（如圖紅色圈出部分所示）。 3.接下來，點擊【

輕鬆拿捏 4K 高畫質影像理解！這個多模態大模型自動分析網頁海報內容，打工人簡直不要太方便 Apr 23, 2024 am 08:04 AM

一個可以自動分析PDF、網頁、海報、Excel圖表內容的大模型，對於打工人來說簡直不要太方便。上海AILab，香港中文大學等研究機構提出的InternLM-XComposer2-4KHD（簡寫為IXC2-4KHD）模型讓這一切成為了現實。相較於其他多模態大模型不超過1500x1500的分辨率限制，該工作將多模態大模型的最大輸入影像提升到超過4K（3840x1600）分辨率，並支援任意長寬比和336像素～4K動態解析度變化。發布三天，模型就登頂HuggingFace視覺問答模型熱度排行榜第一。輕鬆拿捏

跳票 2 年，國產 3D 動畫電影《二郎神之深海蛟龍》定檔 7 月 13 日 Jan 26, 2024 am 09:42 AM

本站1月26日消息，國產3D動畫電影《二郎神之深海蛟龍》發布一組最新劇照，正式宣布將於7月13日上映。據了解，《二郎神之深海蛟龍》是由迷狐星（北京）動漫有限公司、霍爾果斯眾合千澄影業有限公司、浙江橫店影業有限公司、浙江共贏影業有限公司、成都天火科技有限公司、華文映像（北京）影業有限公司出品，王君執導的動畫電影，原定2022年7月22日在中國大陸上映。本站劇情簡介：封神之戰後，姜子牙攜「封神榜」分封諸神，而後封神榜被天庭封印於九州祕境深海之下。事實上，除了分封神位，封神榜中還封緘著眾多強大的妖邪元

航空嘉 MX750P 全模組電源評測：750W 的白金實力濃縮 Mar 28, 2024 pm 03:20 PM

ITX平台以小巧的身形吸引了許多追求極致和獨特美感的玩家，隨著製程的提升和技術的進步，英特爾第14代酷睿和RTX40系顯卡都可以在ITX平台中發揮實力，遊戲玩家也對SFX電源有了更高的要求。遊戲愛好者航空嘉推出新的MX系列電源，在滿足高效能需求的ITX平台中，MX750P全模組電源的定額功率高達750W，同時通過了80PLUS白金級認證。以下我們就帶來這款電源的評測。航嘉MX750P全模組電源採用了簡約時尚的設計理念，共有黑白兩款供玩家選擇，均採用磨砂表面處理，搭配銀灰色和紅色的字體有很好的質感，

春日裡的精緻光影藝術，哈趣 H2 性價比之選 Apr 17, 2024 pm 05:07 PM

隨著春天的到來，萬物復甦，一切都充滿了生命與活力。在這個美好的季節裡，如何為居家生活增添一抹別樣的色彩？哈趣H2投影儀，以其精緻的設計和超高的性價比，成為了這個春天裡不可或缺的一道亮麗風景。這款H2投影機小巧玲瓏卻不失時尚。無論是放在客廳的電視櫃上，或是臥室的床頭櫃旁，都能成為一道明亮的風景線。它的機身採用了奶白色的磨砂質地，這種設計不僅讓投影機的外觀更顯高級，同時也增加了觸感的舒適度。米色仿皮紋材質，更為整體外觀增添了一抹溫馨與雅緻。這種色彩與材質的搭配，既符合現代家居的美感趨勢，又能融入

See all articles

js怎麼為輸入框增加動畫效果

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題