JavaScript:表單焦點/非焦點偵測變換圖片(可以做得很可愛的偵測特效!)

2018/12/29 366 0 網站技術 , HTML , JavaScript

因為做學校多媒體程式設計的前端介面,有機會做到登入畫面,突然想到過去有在其他網站看到欄位的焦點偵測特效,沒錯!這個網頁上方有個人物,當游標焦點在「密碼」時,那個人物就會遮眼,相當可愛!😍 於是我就靈機一動,想要嘗試看看做出這樣的效果,剛好運用這學期學到的 JavaScript 基礎功能就能偵測是否焦點,焦點時導入指定 CSS 顯示指定圖案(例如:人物躲起來、遮眼等),非焦點時就更改 CSS 顯示原本的圖案(正常的人物等),可以靠著自己的創意做出多種風格唷!😉 接著是程式碼與預覽的部分。

//密碼焦點更改上方圖示
function PW_Focus() {
document.getElementById('img').style.background = "url(https://i.imgur.com/NNsKwtp.png)";
}
//密碼非焦點更改上方圖示
function PW_Onblur() {
document.getElementById('img').style.background = "url(https://i.imgur.com/oIgBPWJ.png)";
}

以上是最主要的 JavaScript 程式,利用這兩個方法變換「img」的圖片,HTML 方面,只要在密碼欄位的標籤上加「onfocus="PW_Focus()"」和「onblur="PW_Onblur()"」,前者為焦點時呼叫「PW_Focus()」方法,後者為非焦點時呼叫「PW_Onblur()」方法。

以下提供範例網頁原始碼的截圖與預覽結果:

▲示範截圖。

▲示範結果。

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇