JS實現提示效果彈出及延遲隱藏的功能

來源：懂視網責編：小采時間：2020-11-27 21:51:55

JS實現提示效果彈出及延遲隱藏的功能

JS實現提示效果彈出及延遲隱藏的功能: 自動登錄勾選提示效果要求:鼠標移入顯示提示信息框；鼠標離開,信息框消失，消失的效果延遲 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport

推薦度：

點擊下載本文 文檔為doc格式

導讀JS實現提示效果彈出及延遲隱藏的功能: 自動登錄勾選提示效果要求:鼠標移入顯示提示信息框；鼠標離開,信息框消失，消失的效果延遲 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport

自動登錄勾選提示效果

要求:鼠標移入顯示提示信息框；鼠標離開,信息框消失，消失的效果延遲

<!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實現提示效果彈出及延遲隱藏的功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com