html和css写在一起方便看,div通过定位设置为-200隐藏,span也是通过定位定在div靠左的中间
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Document</title>
7 <style type="text/css">
8 * {
9 margin: 0;
10 padding: 0;
11 font-size: 12px;
12 }
13
14 div {
15 width: 200px;
16 height: 200px;
17 background: green;
18 position: relative;
19 left: -200px;
20 }
21
22 span {
23 width: 30px;
24 height: 30px;
25 line-height: 30px;
26 background: red;
27 position: absolute;
28 left: 200px;
29 top: 85px;
30 text-align: center;
31 cursor: pointer;
32 }
33 </style>
34 </head>
35
36 <body>
37 <div id="div">
38 <span id="show">show</span>
39 </div>
40
41 42 </body>
43
44 </html>
js部分是通过添加定时器设置offsetLeft值的自增和自减，来达到div显示和隐藏的效果
1 <script>
2 function $(id) {
3 return typeof id === "string" ? document.getElementById(id) : id;
4 }
5
6 window.onload = function() {
7 //定义了隐藏的div为pto
8 var pto = $("div");
9 //定义了按钮span为 btn
10 var btn = $("show");
11 //定义一个空的定时器
12 var timer = null;
13
14 //按钮绑定一个鼠标移进事件
15 btn.onmouseenter = start;
16
17 //自定义函数用于自动增加
18 function start() {
19 //防止自加速,每次开始前都要清除定时器
20 clearInterval(timer);
21 //定义一个定时器
22 timer = setInterval(show, 30);
23 }
24
25 //自定义函数,直到offsetLeft的值为0,否则offsetLeft的值从-200一直自增5
26 function show() {
27 if (pto.offsetLeft == 0) {
28 clearInterval(timer);
29 } else {
30 pto.style.left = pto.offsetLeft + 5 + ‘px‘;
31 }
32 }
33
34 //绑定一个鼠标移出事件
35 btn.onmouseleave = back;
36
37 //自定义函数,用于自动减少
38 function back() {
39 clearInterval(timer);
40 timer = setInterval(clear, 30);
41 }
42
43 //自定义函数，直到offsetLeft的值为-200，否则offsetLeft的值一直自减5
44 function clear() {
45 if (pto.offsetLeft == -200) {
46 clearInterval(timer);
47 } else {
48 pto.style.left = pto.offsetLeft - 5 + ‘px‘;
49 }
50 }
51
52 }
53 </script>
时间： 2024-08-28 09:55:38