1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 list-style: none;
11 }
12
13 body{
14 background-color: #000;
15 }
16
17 #box{
18 width: 750px;
19 height: 400px;
20 border: 10px solid red;
21 margin: 100px auto;
22 overflow: hidden;
23 position: relative;
24 }
25
26 #pic{
27 position: absolute;
28 left: 0;
29 top: 0;
30 }
31
32 #to_top, #to_bottom{
33 width: 100%;
34 height: 50%;
35 /* background-color: #fff;*/
36 position: absolute;
37 left: 0;
38 cursor: pointer;
39 }
40
41 #to_top{
42 top: 0;
43 }
44
45 #to_bottom{
46 bottom: 0;
47 }
48 </style>
49 </head>
50 <body>
51 <div id="box">
52 <img id="pic" src="images/timg.jpg" alt="">
53 <span id="to_top"></span>
54 <span id="to_bottom"></span>
55 </div>
56
57 <script>
58 window.onload = function (ev) {
59 // 1. 获取标签
60 var box = document.getElementById('box');
61 var pic = document.getElementById('pic');
62 var to_top = document.getElementById('to_top');
63 var to_bottom = document.getElementById('to_bottom');
64 var intervalId, num = 0;
65 // 2. 监听鼠标进入事件
66 // 向上
67 to_top.onmouseover = function (ev1) {
68 // 2.1 清除定时器
69 clearInterval(intervalId);
70 // 2.2 设置定时器
71 intervalId = setInterval(function () {
72 // 步长
73 num -= 10;
74 // 判断
75 if(num > -2466){
76 pic.style.top = num + 'px';
77 }else {
78 clearInterval(intervalId)
79 }
80
81 },20);
82
83 };
84
85 // 向下
86 to_bottom.onmouseover = function (ev1) {
87 // 2.1 清除定时器
88 clearInterval(intervalId);
89
90 // 2.2 设置定时器
91 intervalId = setInterval(function () {
92 // 步长
93 num += 10;
94
95 // 判断
96 if(num <= 0){
97 pic.style.top = num + 'px';
98 }else {
99 clearInterval(intervalId)
100 }
101
102 },20);
103 };
104
105 // 鼠标离开
106 box.onmouseout = function (ev1) {
107 // 清除定时器
108 clearInterval(intervalId)
109 }
110 }
111 </script>
112 </body>
113 </html>
window.onload = function (ev) {
// 1. 获取标签
var begin = document.getElementById('begin');
var end = document.getElementById('end');
var name = document.getElementById('name');
// 2. 定义变量
var intervalID = null;
var nameArr = ['霍建华', '周杰伦', '刘德华', '宋小宝', '杨幂', '十一郎'];
name.innerText = nameArr[0];
// 3. 监听点击
begin.onclick = function (ev1) {
clearInterval(intervalID);
intervalID = setInterval(function () {
// 3.1 随机数
var s_index = parseInt( Math.random()* nameArr.length);
console.log(s_index)
name.innerText = nameArr[s_index];
}, 1000)
};
end.onclick = function (ev1) {
clearInterval(intervalID);
}
}
