以下代码忘记从哪里看到的了，找不到原文链接了，要是哪位发现这是自己的代码，可联系我，我加上原文链接哈~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
body {
margin:0px;
padding:0px;
color:#FFFFFF;
}
.maindiv {
position:absolute;
width:100%;
height:100%;
overflow:auto;
}
.radiodiv {
position:absolute;
bottom:30%;
right:20px;
display:inline-table;
text-align:right;
}
.contentdiv {
position:absolute;
width:100%;
height:100%;
color:#999999;
background-color:#333333;
}
#contentdiv1 {
top:0%;
background-color:#000000;
}
#contentdiv2 {
top:100%;
background-color:#333333;
}
#contentdiv3 {
top:200%;
background-color:#666666;
}
#contentdiv4 {
top:300%;
background-color:#999999;
}
#contentdiv5 {
top:400%;
background-color:#CCCCCC;
}
</style>
<body>
<div id="maindiv" class="maindiv">
<div id="contentdiv1" class="contentdiv">1</div>
<div id="contentdiv2" class="contentdiv">2</div>
<div id="contentdiv3" class="contentdiv">3</div>
<div id="contentdiv4" class="contentdiv">4</div>
<div id="contentdiv5" class="contentdiv">5</div>
</div>
<div id="radiodiv" class="radiodiv">
<input type="radio" id="radio1" onmouseenter="showScreen(1);" name="radio" value="1" checked="checked">
<br><br><input type="radio" id="radio2" onmouseenter="showScreen(2)" name="radio" value="2">
<br><br><input type="radio" id="radio3" onmouseenter="showScreen(3)" name="radio" value="3">
<br><br><input type="radio" id="radio4" onmouseenter="showScreen(4)" name="radio" value="4">
<br><br><input type="radio" id="radio5" onmouseenter="showScreen(5)" name="radio" value="5">
<br><br>
<div id="informationdiv"></div>
</div>
<script>
function $(id) {
return document.getElementById(id);
}
//浏览器窗口高度
var windowHeight = 900;
var currentN = 1;
var currentTop = 0;
var scrollDirection = 1;
var clock;
window.onresize = function() {
windowHeight = document.documentElement.clientHeight;
}
window.onload = function() {
//获取浏览器窗口高度
windowHeight = document.documentElement.clientHeight;
//主显DIV滚动事件处理
$("maindiv").onscroll = function() {
//获取当前滚动的顶线位置
var tempTop = $("maindiv").scrollTop;
//计算当前在第几个主画面
n = Math.round(tempTop / windowHeight) + 1;
radio(n);
//判断滚动方向
if (tempTop > currentTop) {
scrollDirection = 1;
} else if (tempTop < currentTop) {
scrollDirection = -1;
}
//滑动动画
clearInterval(clock);
clock = setInterval(animation, 1);
//每次滚动完毕将位置存入变量以供比较判断滚动方向
currentTop = $("maindiv").scrollTop;
//$("informationdiv").innerHTML="方向"+scrollDirection+" "+n+"th screen "+"scroll top of maindiv"+currentTop+" window height:"+windowHeight;
}
}
//选中第n个radio
function radio(n) {
$("radio" + n).checked = "true";
}
//点选RADIO后直接跳转至第n屏
function showScreen(n) {
radio(n);
var targetTop = (n - 1) * windowHeight;
$("maindiv").scrollTop = targetTop;
}
//分屏滑动动画效果
function animation() {
if (scrollDirection == 1) {
//上行
if ($("maindiv").scrollTop % windowHeight != 0) {
$("maindiv").scrollTop += 1;
} else {
clearInterval(clock);
}
}
if (scrollDirection == -1) {
//下行
if ($("maindiv").scrollTop % windowHeight != 0) {
$("maindiv").scrollTop -= 1;
} else {
clearInterval(clock);
}
}
}
</script>
</body>
</html>
网友评论