刚开始写的响应式 以后肯定更好的
程序员文章站
2022-10-23 10:31:38
响应式 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 ... ......
<!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>
上一篇: 笑话集原创笑话精品展第117期