要求:鼠标移入显示提示信息框；鼠标离开,信息框消失，消失的效果延迟

最新推荐文章于 2022-12-02 15:31:21 发布

banshao4968

最新推荐文章于 2022-12-02 15:31:21 发布

阅读量746

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lee1-w/p/11410410.html

版权

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>

转载于:https://www.cnblogs.com/lee1-w/p/11410410.html

banshao4968

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
要求:鼠标移入显示提示信息框；鼠标离开,信息框消失，消失的效果延迟

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 ...
复制链接

扫一扫