刚开始写的响应式以后肯定更好的

2018-07-16 03:11:32来源：博客园阅读 ()

<!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>