JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能
更新時(shí)間：2019年08月26日 10:27:40 作者：而一水巳
這篇文章主要介紹了JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(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>
總結(jié)
以上所述是小編給大家介紹的JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
您可能感興趣的文章:
- 解決IDEA JSP沒(méi)有代碼提示問(wèn)題的幾種方法
- Python解析json時(shí)提示“string indices must be integers”問(wèn)題解決方法
- 解決eclipse中沒(méi)有js代碼提示的問(wèn)題
- 基于JS實(shí)現(xiàn)html中placeholder屬性提示文字效果示例
- VSCode中如何利用d.ts文件進(jìn)行js智能提示
- 為vue-router懶加載時(shí)下載js的過(guò)程中添加loading提示避免無(wú)響應(yīng)問(wèn)題
- 前端防止用戶重復(fù)提交js實(shí)現(xiàn)代碼示例
- JS定時(shí)器如何實(shí)現(xiàn)提交成功提示功能
相關(guān)文章
書(shū)簽小工具（Bookmarklets）是一個(gè)非常棒的javascript代碼小片斷偽裝成的小應(yīng)用，它駐留在你的瀏覽器里并為網(wǎng)頁(yè)提供額外的功能。這里我們將研究如何從頭開(kāi)始創(chuàng)建一個(gè)書(shū)簽小工具及一些最佳實(shí)踐的建議。2011-02-02
JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別
js中一般使用tofixed與round處理數(shù)據(jù)四舍五入，那么tofixed與round有什么區(qū)別呢？下面小編給大家分享JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別，需要的朋友參考下吧2017-10-10
firefox和IE系列的相關(guān)區(qū)別整理 以備后用
firefox和IE系列的相關(guān)區(qū)別整理，整理相對(duì)來(lái)說(shuō)還可以，但對(duì)于個(gè)別細(xì)節(jié)的處理不夠完善。具體的可以參考腳本*之家以前發(fā)布的文章。2009-12-12
JS實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名和順序點(diǎn)名
這篇文章主要介紹了基于JS實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名和順序點(diǎn)名的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-03-03
基于aotu.js實(shí)現(xiàn)微信自動(dòng)添加通訊錄中的聯(lián)系人功能
這篇文章主要介紹了利用aotu.js實(shí)現(xiàn)微信自動(dòng)添加通訊錄中的聯(lián)系人,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
本文主要對(duì)常見(jiàn)的完全錯(cuò)誤的隨機(jī)排列算法進(jìn)行介紹分析，并介紹了經(jīng)典的隨機(jī)排列算法，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
js中有各種與位置相關(guān)的屬性,每次看到的時(shí)候都各種懵逼,索性一次總結(jié)一下,這篇文章主要給大家介紹了關(guān)于js中位置計(jì)算的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
這篇文章主要介紹了JS高階函數(shù)原理與用法,結(jié)合實(shí)例形式分析了javascript函數(shù)式編程、一等函數(shù)、高階函數(shù)等相關(guān)概念、原理及使用技巧,需要的朋友可以參考下2019-01-01
H5如何實(shí)現(xiàn)喚起APP及調(diào)試bug解決
這篇文章主要為大家介紹了H5如何實(shí)現(xiàn)喚起APP及調(diào)試bug解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹(shù)實(shí)現(xiàn)查找最小值、最大值、給定值算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹(shù)實(shí)現(xiàn)查找最小值、最大值、給定值算法,涉及javascript二叉樹(shù)定義、賦值、遍歷、查找等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03