本次要实现的效果是，在一个盒子里面有一张长图，只显示了一部分，为方便用户浏览，当鼠标移入时，图片开始滚动，将盒子分成上下两部分，当鼠标移入上部分时，图片向上滚动，当鼠标移入下部分时，图片向下滚动。
为了实现上面的效果，我们需要在html中进行简单的布局：
<div id="box"> <img id="pic" src="images/timg.jpg" alt=""> <span id="to_top"></span> <span id="to_bottom"></span> </div>
其中div为外层固定大小的大盒子，因为图片大于盒子，所以需要将盒子设置超出隐藏，图片上下滚动式通过定位实现的，需要将图片设置为相对父级定位，通过两个span来判断鼠标移入时的位置是在上半部分还是下半部分，所以两个span均为盒子的一半，分别位于盒子的上半部分和下半部分。
<style> *{ margin: 0; padding: 0; list-style: none; } body{ background-color: #000; } #box{ width: 750px; height: 400px; border: 1px solid red; margin: 100px auto; overflow: hidden; position: relative; } #pic{ position: absolute; left: 0; top: 0; } #to_top, #to_bottom{ width: 100%; height: 50%; /*background-color: greenyellow;*/ position: absolute; left: 0; cursor: pointer; } #to_top{ top: 0; } #to_bottom{ bottom: 0; } </style>
接下来开始写相应的事件，首先需要获取相应的元素标签
var box = document.getElementById("box");
var pic = document.getElementById("pic");
var to_top = document.getElementById("to_top");
var to_bottom = document.getElementById("to_bottom");
然后监听鼠标事件，并用定时器实现动画效果。
to_top.onmouseover = function () {
timer = setInterval(function () {
num += 10;
pic.style.top = num + 'px';
}, 20);
};
to_bottom.onmouseover = function () {
timer = setInterval(function () {
num += 10;
pic.style.top = num + 'px';
}, 20);
};
box.onmouseout = function () {
clearInterval(timer);
}
现在基本可以实现图片相应鼠标，进行上下滑动了，但还是有问题，首先是定时器累加，其次是图片无限制的上下滑动，针对这两个问题，我们需要在每次鼠标进入时清除定时器，另外就是判断滚动的临界值：
- 图片向下滚动时，顶部距离父级元素的位置不能大于0，即初始的默认值位置
- 图片向上滚动时，顶部距离父级元素的位置不能小于图片长度与盒子高度的差值
根据上面的两点，重新整理上面的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; list-style: none; } body{ background-color: #000; } #box{ width: 750px; height: 400px; border: 1px solid red; margin: 100px auto; overflow: hidden; position: relative; } #pic{ position: absolute; left: 0; top: 0; } #to_top, #to_bottom{ width: 100%; height: 50%; /*background-color: greenyellow;*/ position: absolute; left: 0; cursor: pointer; } #to_top{ top: 0; } #to_bottom{ bottom: 0; } </style> </head> <body> <div id="box"> <img id="pic" src="images/timg.jpg" alt=""> <span id="to_top"></span> <span id="to_bottom"></span> </div> <script> window.onload = function () { // 1. 获取标签 var box = document.getElementById("box"); var pic = document.getElementById("pic"); var to_top = document.getElementById("to_top"); var to_bottom = document.getElementById("to_bottom"); var timer = null, num = 0; // 2. 监听鼠标事件 to_top.onmouseover = function () { // 2.1 清除定时器 clearInterval(timer); // 2.2 设置定时器 timer = setInterval(function () { // 步长 num -= 10; // 判断 if(num >= -2466){ pic.style.top = num + 'px'; }else { clearInterval(timer); } }, 20); }; to_bottom.onmouseover = function () { // 2.1 清除定时器 clearInterval(timer); // 2.2 设置定时器 timer = setInterval(function () { // 步长 num += 10; // 判断 if(num <= 0){ pic.style.top = num + 'px'; }else { clearInterval(timer); } }, 20); }; box.onmouseout = function () { // 清除定时器 clearInterval(timer); } } </script> </body> </html>
完整代码下载链接：点这里