自動登錄勾選提示效果
要求:鼠標移入顯示提示信息框；鼠標離開,信息框消失，消失的效果延遲
<!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>自動登錄</span> <div id="tip">為了您的安全請不要在網吧等公共場所使用！</div></body><script> var osign = document.getElementById("sign"); var tip = document.getElementById("tip"); var timer; var oo=1; //鼠標移入時顯示提示信息（讓提示框的隱藏效果消失） osign.onmouseover = function(){ //清除延時器以免出現閃爍 clearInterval(timer); tip.style.display = "block"; tip.style.opacity=1; } //鼠標離開,信息消失，隱藏效果延遲 osign.onmouseout = function(){ clearInterval(timer); timer = setInterval(function(){ //讓透明度漸減，直至為零 oo -= 0.1; tip.style.opacity=oo; if(oo == 0){ clearInterval(timer); } },70); //最后復原透明度，成為下次的開始值 oo=1; }</script></html>總結
以上所述是小編給大家介紹的JS實現提示效果彈出及延遲隱藏的功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
