1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 #sign{
10 display: inline-block;
11 width: 15px;
12 height: 15px;
13 border: 1px solid #ccc2c2;
14 }
15 #tip{
16 width: 150px;
17 height: 70px;
18 ">);
19 border: 1px solid orange;
20 color: rgb(161, 59, 48);
21 display: none;
22 opacity: 1;
23 }
24 </style>
25 </head>
26 <body>
27 <span id="sign"></span>
28 <span>自動登錄</span>
29 <div id="tip">為了您的安全請不要在網吧等公共場所使用！</div>
30 </body>
31 <script>
32 var osign = document.getElementById("sign");
33 var tip = document.getElementById("tip");
34 var timer;
35 var oo=1;
36 //鼠標移入時顯示提示信息（讓提示框的隱藏效果消失）
37 osign.onmouseover = function(){
38 //清除延時器以免出現閃爍
39 clearInterval(timer);
40 tip.style.display = "block";
41 tip.style.opacity=1;
42 }
43
44 //鼠標離開,信息消失，隱藏效果延遲
45 osign.onmouseout = function(){
46 clearInterval(timer);
47 timer = setInterval(function(){
48 //讓透明度漸減，直至為零
49 oo -= 0.1;
50 tip.style.opacity=oo;
51 if(oo == 0){
52 clearInterval(timer);
53 }
54 },70);
55 //最后復原透明度，成為下次的開始值
56 oo=1;
57 }
58 </script>
59 </html>
要求:鼠標移入顯示提示信息框；鼠標離開,信息框消失，消失的效果延遲
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。