长图滚动案例+点名册案例

  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              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              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);
        }
    }