您好,登錄后才能下訂單哦!
這篇文章主要介紹了JS怎么實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
自動(dòng)登錄勾選提示效果
要求:鼠標(biāo)移入顯示提示信息框;鼠標(biāo)離開(kāi),信息框消失,消失的效果延遲
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #sign{ display: inline-block; width: 15px; height: 15px; border: 1px solid #ccc2c2; } #tip{ width: 150px; height: 70px; background-color: rgb(243, 200, 120); border: 1px solid orange; color: rgb(161, 59, 48); display: none; opacity: 1; } </style> </head> <body> <span id="sign"></span> <span>自動(dòng)登錄</span> <div id="tip">為了您的安全請(qǐng)不要在網(wǎng)吧等公共場(chǎng)所使用!</div> </body> <script> var osign = document.getElementById("sign"); var tip = document.getElementById("tip"); var timer; var oo=1; //鼠標(biāo)移入時(shí)顯示提示信息(讓提示框的隱藏效果消失) osign.onmouseover = function(){ //清除延時(shí)器以免出現(xiàn)閃爍 clearInterval(timer); tip.style.display = "block"; tip.style.opacity=1; } //鼠標(biāo)離開(kāi),信息消失,隱藏效果延遲 osign.onmouseout = function(){ clearInterval(timer); timer = setInterval(function(){ //讓透明度漸減,直至為零 oo -= 0.1; tip.style.opacity=oo; if(oo == 0){ clearInterval(timer); } },70); //最后復(fù)原透明度,成為下次的開(kāi)始值 oo=1; } </script> </html>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“JS怎么實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。