JS实现长图上下滚动效果

//通用样式
 * {
 margin: 0;
 padding: 0;
 }
 #box {
 width: 750px;
 height: 200px;
 border: 1px solid #000;
 margin: 200px auto;
 overflow: hidden; /*图片溢出部分隐藏*/
 position: relative; /*子绝父相*/
 }

 #pic {
 position: absolute;
 left: 0;
 right: 0;
 }

 
 #top {
 width: 100%;
 height: 50%;
 position: absolute; /*子绝父相*/
 left: 0;
 cursor: pointer; /*鼠标*/
  /* 顶部对齐 */
 top:0; 
 }
 
 #bottom {
 width: 100%;
 height: 50%;
 position: absolute; /*子绝父相*/
 left: 0;
 cursor: pointer;
 /* 底部对齐 */
 bottom: 0;
 }

 top.Onmouseover= function(){
  // 改变pic中的top 
  // 清除定时器
  // alert(0);
  clearInterval(intervalId);

  // 设置定时器 
  intervalId = setInterval(function(){
  if(num > -600){
   num -= 10;
   pic.style.top = num + "px";
  }
  
  },20);

top.Onmouseout= function() {
  clearInterval(intervalId);
 }