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 is Color: RGB (161, 59, 48);
21 display: none;
22 is Opacity:. 1;
23 is}
24 </ style>
25 </ head>
26 is <body>
27 <span ID = "Sign"> </ span>
28 <span> automatic login </ span>
29 <div the above mentioned id = "Tip"> for your safety, do not use in Internet cafes and other public places! </ div>
30 </ body>
31 is <Script>
32 osign var = document.getElementById ( "Sign");
33 is Tip var = document.getElementById ( "Tip");
34 is var Timer;
35 = OO var. 1;
36 display a message (to make prompt box to hide the effect disappears) // when the mouse into
37 osign.onmouseover = function () {
38 // clear the delay to avoid flicker
39 clearInterval (timer);
Tip.style.opacity. 1 = 41 is;
42 is}
45 osign.onmouseout = function () {
46 is the clearInterval (Timer);
47 Timer = the setInterval (function () {
48 // allow transparency decreasing until zero
49 oo - = 0.1;
50 tip.style.opacity = OO;
51 is IF (OO == 0) {
52 is the clearInterval (Timer);
53 is}
54 is}, 70);
and finally restoring transparency // 55, becomes the starting value of the next
56 oo = . 1;
57 is}
58 </ Script>
59 </ HTML>Requirements: mouse into the display message box; the mouse left, the message box disappears, the disappearance of the effect of delay
Guess you like
Origin www.cnblogs.com/lee1-w/p/11410410.html
Ranking