JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:51:55

JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能

JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能: 自動(dòng)登錄勾選提示效果要求:鼠標(biāo)移入顯示提示信息框；鼠標(biāo)離開(kāi),信息框消失，消失的效果延遲 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能: 自動(dòng)登錄勾選提示效果要求:鼠標(biāo)移入顯示提示信息框；鼠標(biāo)離開(kāi),信息框消失，消失的效果延遲 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport

自動(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>

總結(jié)

以上所述是小編給大家介紹的JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：出現(xiàn) 提示 js

熱門焦點(diǎn)

JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能

JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能

JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能

最新推薦

猜你喜歡

熱門推薦