JS實現(xiàn)提示效果彈出及延遲隱藏的功能
更新時間：2019年08月26日 10:27:40 作者：而一水巳
這篇文章主要介紹了JS實現(xiàn)提示效果彈出及延遲隱藏的功能,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
自動登錄勾選提示效果
要求:鼠標(biāo)移入顯示提示信息框；鼠標(biāo)離開,信息框消失，消失的效果延遲
<!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">為了您的安全請不要在網(wǎng)吧等公共場所使用！</div>
</body>
<script>
var osign = document.getElementById("sign");
var tip = document.getElementById("tip");
var timer;
var oo=1;
//鼠標(biāo)移入時顯示提示信息（讓提示框的隱藏效果消失）
osign.onmouseover = function(){
//清除延時器以免出現(xiàn)閃爍
clearInterval(timer);
tip.style.display = "block";
tip.style.opacity=1;
}
//鼠標(biāo)離開,信息消失，隱藏效果延遲
osign.onmouseout = function(){
clearInterval(timer);
timer = setInterval(function(){
//讓透明度漸減，直至為零
oo -= 0.1;
tip.style.opacity=oo;
if(oo == 0){
clearInterval(timer);
}
},70);
//最后復(fù)原透明度，成為下次的開始值
oo=1;
}
</script>
</html>
總結(jié)
以上所述是小編給大家介紹的JS實現(xiàn)提示效果彈出及延遲隱藏的功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了JS中循環(huán)字符串拼接時加換行問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
Electron 打包問題:electron-builder 下載各種依賴出錯(推薦)
這篇文章主要介紹了Electron 打包問題：electron-builder 下載各種依賴出錯,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要介紹了js表單中選擇框值的獲取及表單的序列化，學(xué)習(xí)表單中單選、多選、選擇框值的獲取,需要的朋友可以參考下2015-12-12
日常開發(fā)中，我們會常常把一些功能提取出來，包裝成一個公共模塊或者組件.這篇文章主要介紹了webpack公共組件引用路徑簡化小技巧,非常具有實用價值，需要的朋友可以參考下2018-06-06
這篇文章介紹了echarts安裝與配置的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript Date對象，介紹 Date 日期和時間對象的操作，感興趣的小伙伴們可以參考一下2016-03-03
解決uni-app微信小程序input輸入框在底部時,鍵盤彈起頁面整體上移問題
問題是這樣的input?獲取焦點時會自動調(diào)起手機鍵盤，設(shè)置?:adjust-position="true"，會導(dǎo)致鍵盤彈起時頁面整體上移，這篇文章主要介紹了解決uni-app微信小程序input輸入框在底部時，鍵盤彈起頁面整體上移問題,，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了JavaScript取得WEB安全顏色列表的方法,分析了web安全顏色的定義及javascript獲取web安全顏色的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡單網(wǎng)頁倒計時器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家介紹了GoJs?圖片繪圖模板Picture使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04