快捷導(dǎo)航

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)注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

js 創(chuàng)建書(shū)簽小工具之理論
書(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
詳解js數(shù)組的完全隨機(jī)排列算法
本文主要對(duì)常見(jiàn)的完全錯(cuò)誤的隨機(jī)排列算法進(jìn)行介紹分析，并介紹了經(jīng)典的隨機(jī)排列算法，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
一篇文章讓你徹底搞懂js中的位置計(jì)算
js中有各種與位置相關(guān)的屬性,每次看到的時(shí)候都各種懵逼,索性一次總結(jié)一下,這篇文章主要給大家介紹了關(guān)于js中位置計(jì)算的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-09-09
JS高階函數(shù)原理與用法實(shí)例分析
這篇文章主要介紹了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