模态窗口

下一页

上一页

//获取到所有功能标签

var next = document.getElementById('next')

var last = document.getElementById("last")

var page2 = document.getElementById('page2')

var timer1;//另外定义一个定时器，为了区分timer，方便停止其中的一个

//点击next按钮后，page2页面缓缓上升，遮挡住page1页面

next.onclick = function(){

clearInterval(timer1)//如果不清理以前的定时器，有可能两个同时在执行从而导致错误

var timer = setInterval(function(){

//在每次修改top值判断当前page2是否达到页面顶部，到达则清除定时器

if(page2.offsetTop <= 0){

clearInterval(timer)

}else{

page2.style.top = page2.offsetTop - 10 +'px';

}//最好放在else里，写在外面可以实现，但是双击下一页的话会出现问题

},10);

}

last.onclick = function(){

timer1 = setInterval(function(){

//在每次修改top值判断当前page2是否达到页面底部，到达则清除定时器

if(page2.offsetTop >= 500){

clearInterval(timer1)

}else{

page2.style.top=page2.offsetTop+10+'px';

}//最好放在else里,没有判断的话，一点击就会移动，而不是判断完移动

},10);

}