(4)关于整屏滚动的一些想法
一,其中元素的尺寸大小
html结构:
<html>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
css中,关于关于整屏滚动百分比尺寸,很重要的一点:
html,body,ul,ul li{width:100%;
height:100%;}
其中,html,body,ul,ul li这四个点,一个都不能少,少了一个,整个页面就没效果了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding:0; margin:0; list-style:none; } html,body,ul,ul li{ width:100%; height:100%; } ol{ position:fixed; right:20px; top:50%; list-style:none; margin-top:-42px; } ol li{ width:10px; height:10px; border:1px black solid; border-radius:10px; margin-top:5px; cursor: pointer; } .current{ background:white; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ol> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> </ol> </body> <script type="text/javascript"> var ul = document.getElementsByTagName('ul')[0]; var ulLis=ul.getElementsByTagName('li'); var ol=document.getElementsByTagName('ol')[0]; var olLis=ol.getElementsByTagName('li'); var colorArr=['red','green','blue','pink','#565656'] //赋予颜色 for(var i=0;i<olLis.length;i++){ ulLis[i].style.background=colorArr[i]; ulLis[i].index=i; olLis[i].index=i; }; function Animation(target){ this.timer = setInterval(function(){ var leader=window.pageYOffset; var step=(target-leader)/10; step=step>0?Math.ceil(step):Math.floor(step); leader+=step; window.scrollTo(0,leader); if(leader==target){ clearInterval(window.timer); }; },30) }; for(var i=0;i<olLis.length;i++){ olLis[i].onmouseover=function(){ clearInterval(window.timer);//这里每触发一次鼠标事件,便必须清除上一次的定时器。这样,才不会使这一次的事件和上一次的事件发生冲突。 for(var i=0;i<olLis.length;i++){ olLis[i].className=''; }; olLis[this.index].className='current'; var target = ulLis[this.index].offsetTop; Animation(target); } }; function change(obj){ for( var i=0;i<olLis.length;i++){ olLis[i].className=''; olLis[obj].className='current'; } }; function mouseWheel(event){ clearInterval(window.timer); var index = event.target.index;//taeget.index是指ul中li,而li的index是要在前面赋予的。并不是自带的属性。 var length=ulLis.length; wheelDelta = event.detail; console.log(wheelDelta); if(index === length-1){ target=ulLis[index-1].offsetTop; wheelDelta<0?Animation(target):null; console.log(index); wheelDelta<0?change(index-1):null; } else if(index === 0){ target=ulLis[index+1].offsetTop; wheelDelta<0?null:Animation(target); wheelDelta<0?null: change(index+1); console.log(index); } else if(index>0||index<length-1){ target_01=ulLis[index-1].offsetTop; target_02=ulLis[index+1].offsetTop; wheelDelta>0?change(index+1):change(index-1); wheelDelta>0?Animation(target_02):Animation(target_01); console.log(index); } } ul.addEventListener('DOMMouseScroll',mouseWheel,false); </script> </html>
上面是firefox版。其中DOMMouseScroll是只有火狐才有的api,是鼠标滚轮滑动。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥