整屏滚动
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>整屏滚动</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
html,body,ul{
width:100%;
height:100%;
}
li{
width: 100%;
height:100%;
}
ol{
position:fixed;
top:150px;
right:100px;
}
ol li{
width:40px;
margin-top:-1px;
line-height:40px;
text-align:center;
border:1px solid #000;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</body>
</html>
<script>
// 获取元素
var ul = document.getElementsByTagName("ul")[0];
var ulis = ul.children;
var ol = document.getElementsByTagName("ol")[0];
var olis = ol.children;
var timer =null;
var leader = 0;
// 定义颜色
var arr = ["red","orange","yellow","green","blue"];
// 循环遍历 ulis,olis.添加背景颜色
for(var i=0;i<ulis.length;i++){
ulis[i].style.backgroundColor = arr[i];
olis[i].style.backgroundColor = arr[i];
};
// 滚动window 得到 leader
window.onsocrll = function (){
leader = window.scroll().top;
}
//循环遍历 olis 添加点击事件
for(var j=0;j<olis.length;j++){
olis[j].index = j;
olis[j].onclick = function (){
// 目标位置 = ulis 当前offsetTop的距离
var tagert = ulis[this.index].offsetTop;
// 清除定时器
clearInterval(timer);
// 定义定时器
timer = setInterval(function(){
// 缓动 step = (tagert - leader)/10 ,leader = leader + step
var step = (tagert - leader)/10
step = step >0 ?Math.ceil(step):Math.floor(step);
leader = leader + step
// window.scrollTo(x,y);
window.scrollTo(0,leader);
// 当leader == tagert清除定时器
if(leader == tagert){
clearInterval(timer);
}
},20)
}
}
// 获得卷曲的top,left的方法
function scroll() {
if (window.pageYOffset != null) {
return {
top: window.pageYOffset,
left: window.pageXOffset
};
} else if (document.compatMode == "CSS1Compat") {
//有DTD的网页
return {
top: document.documentElement.scrollTop,
left: document.documentElement.scrollLeft
}
} else {
//没有DTD的
return {
top: document.body.scrollTop,
left: document.body.scrollLeft
}
}
}
</script>
浙公网安备 33010602011771号