JS基础-特效篇（定时器）07-长图滚动
<script>
window.onload = function (ev) {
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 intervalId, num = 0;
/*num记录走了多远*/
to_top.addEventListener('mouseover', function (ev1) {
/*向上*/
/*先清除，后设置*/
clearInterval(intervalId);
intervalId = setInterval(function () {
num -= 10;//步长
/*判断2160-400图片高度减去可视区域高度*/
if (num > -1760) {
pic.style.top = num + 'px';
} else {
clearInterval(intervalId);
}
}, 20);
});
to_bottom.addEventListener('mouseover', function (ev1) {
/*向下*/
/*先清除，后设置*/
clearInterval(intervalId);
intervalId = setInterval(function () {
num += 10;//步长
/*判断2160-400图片高度减去可视区域高度*/
if (num <= 0) {
pic.style.top = num + 'px';
} else {
clearInterval(intervalId);
}
}, 20);
})
box.onmouseout = function (ev1) {
clearInterval(intervalId);
}
}
</script>