<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>响应式</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
height:100%;
width:100%;
}
ol,ul{
list-style:0;
margin:0;
padding:0;
}
.content{
width:100%;
height:100%;
}
.content li{
width:100%;
height:100%;
}
.sContent{
position:fixed;
top:50%;
margin-top:-105px;
}
.sContent li{
width:18px;
height:18px;
border-radius:50%;
line-height:18px;
text-align:center;
background:#ff6600;
color:#fff;
margin-top:5px;
cursor:pointer;
}
.oldColor {
background:#ff6600!important;
}
.newColor{
background:#312e49!important;
}
</style>
</head>
<body>
<ul class="content">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<ol class="sContent">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ol>
<script type="text/javascript" src="scroll.js"></script>
<script type="text/javascript">
var content=document.querySelectorAll(".content li");
var sContent=document.querySelectorAll(".sContent li");
var h = content[0].offsetHeight;//每个li自身的高度 用于后面响应
var len=sContent.length;
var color=["#ff0000","#ff9900","#ffff00","#33cc00","#3300ff","#9966cc","#ff3399","#cc3300","#ccffff","#0000cc"];
var leader=0,offset=0,timer=null;
var sign=true;
for(var i=0;i<len;i++){
sContent[i].index=i;//自定义属性 下标 为了对应关系
content[i].style.background=color[i];
sContent[i].onclick=function(){
sign=false;
var that=this;
//清除定时器
clearInterval(timer);
offset= content[this.index].offsetTop;
timer=setInterval(function(){
//缓动公式
leader=leader+(offset-leader)/20;
window.scrollTo(0,leader);
if(Math.round(leader)==offset){
clearInterval(timer);
sign=true;
}
},1000/60);
//点击小圆点变色
for(var j=0;j<len;j++){
sContent[j].className="oldColor";
}
that.className="newColor";
}
};
//滚动条事件
window.onscroll=function(){
if(sign){
var index=Math.round(obj.scroll().top/h);
console.log(index);
if(index>=0&&index<=len){
//当滚动到指定位置 小圆点变色
for(var j=0;j<len;j++)
{
sContent[j].className="oldColor";
}
sContent[index].className="newColor";
}
}
}
</script>
</body>
</html>
