模态效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
- {
margin: 0 auto;
padding: 0;
}
page1 {
width: 300px;
height: 500px;
border: 1px solid black;
position: relative;
}
page2 {
width: 300px;
height: 500px;
background: gold;
position: absolute;
top: 500px;
}
</style>
</head>
<body>
<div id="page1">
<button id="next">下一页</button>
<div id="page2">
<button id="last">上一页</button>
</div>
</div>
</body>
<script type="text/javascript">
//获取所有功能标签
var next = document.getElementById("next");
var last = document.getElementById("last");
//var page1 = document.getElementById("page1");
var page2 = document.getElementById("page2");
//点击next按钮，page2页面缓缓上升，遮挡住page1页面
// 存在 bug 多次点击 造成定时器紊乱
/*next.onclick = function() {
var timer = setInterval(function() {
//在每次修改top值，判断当前的page2是否到达页面顶部，到达则清理定时器
if(page2.offsetTop <= 10) {
clearInterval(timer);
}
page2.style.top = page2.offsetTop - 10 + "px";
}, 10)
}
last.onclick = function() {
var timer = setInterval(function() {
//在每次修改top值，判断当前的page2是否到达页面顶部，到达则清理定时器
if(page2.offsetTop >= 490) {
clearInterval(timer);
//return;
}
page2.style.top = page2.offsetTop + 10 + "px";
}, 10)
}*/
next.onclick = function(){
if(page2.offsetTop>=500){
var timer = setInterval(function(){
page2.style.top = page2.offsetTop -10 + "px";
if(page2.offsetTop<=0){
clearInterval(timer);
}
},10)
}
}
last.onclick = function(){
var timer = setInterval(function(){
page2.style.top = page2.offsetTop +10 + "px";
if(page2.offsetTop>=500){
clearInterval(timer);
}
},10)
}
</script>
</html>
复制代码
来源： http://10.0.88.88:8083/forum.php?mod=viewthread&tid=44632
