JS单图上下滚动

HTML/css构建部分

1、构建html部分。写入外层div 插入要滚动的长图
2、添加两个空白span的部分，平分外层div的width。
3、样式中，设置对应的position属性。根据“子绝父相”，构建基本页面。

JS逻辑部分

首先分析此效果的构成。
1、鼠标进入上部分任意一处，图片自动回到往上走
2、鼠标进入下部分任意一处，图片自动去到往下走
3、在图片走到尽头时，自动停止。在图片顶部为外层div顶部时，自动停止。
所以在这里需要做一些特殊情况的处理if-else
4、自动、不停地滚动：定时器setInterval
5、一旦使用到定时器、考虑到定时器累加问题。遵从先清除后设置原则
6、当鼠标离开时，图片停止滚动。则使用clearInterval,来停止定时器。
7、滚动：自然可以知道是原来的位置改变。可以轻易改变位置的属性，可想到position。因此只要均匀地改变position中top和bottom的值就可。

获取标签

var box=document.getElementById("box");
var pic=document.getElementById("pic");
var top=document.getElementById("top");
var bottom=document.getElementById("bottom");

事件监听1

var timer=null;
var num=0;
console.log(pic.style.width);
top.onmouseover = function () {
    clearInterval(timer);
   timer = setInterval(function () {
        //步长
      num-=5;
      //判断
      if(num >= -450) /*负数是因为：图片往上走，top值会越来越小*/
      {
          pic.style.top = num+"px";
      }
      else
          clearInterval(timer);
    },100);
};

事件监听2

bottom.onmouseover = function () {
    clearInterval(timer);
    timer = setInterval(function () {
        //步长
        num+=5;
        //判断
        if(num <=0) /*因为这里的num会记录上面事件触发后的num值，上去又下来。*/
        /*所以num=0时，回到最初时的位置*/
        {
            pic.style.top = num+"px";
        }
        else {
            clearInterval(timer);
        }
    },100);
};

事件监听3

box.onmouseout = function () {
    //1、清除定时器
    clearInterval(timer);
}