时间:2021-07-01 10:21:17 帮助过:6人阅读
先来看看结构,都很简单的
<!--楼梯--> <ul class="louti"> <li class="active">第1屏</li> <li>第2屏</li> <li>第3屏</li> <li>第4屏</li> <li>第5屏</li> </ul> <!--内容--> <p class="content"> <p style="background-color: #87CEFB" class="ping staircase"> <p>这是第1屏</p> </p> <p style="background-color: #FFC0CB" class="ping staircase"> <p>这是第2屏</p> /p> <p style="background-color:#BAD5FF" class="ping staircase"> <p>这是第3屏</p> </p> <p style="background-color: #3CB379" class="ping staircase"> <p>这是第4屏</p> </p> <p style="background-color: #AFEEEE" class="ping staircase"> <p>这是第5屏</p> </p> </p>
再来点简单的CSS
html,body { height: 100%; } body { margin: 0; } .content{height: 100%;} .content .ping { height: 100%; } li{ list-style: none; } .louti{ position: fixed; top: 25%; right: 3%; } .louti li{ width: 100px; text-align: center; border: 1px solid #F5F5F5; height: 80px; line-height: 80px; cursor: pointer; } .louti li:nth-child(n+2){ border-top: none; } .louti li.active{ background: burlywood; color: white; }
接下俩就是JS了
//内容一屏一屏的滚动 document.addEventListener("DOMContentLoaded", function() { var body = document.body; var html = document.documentElement; var itv, height = document.body.offsetHeight; var page = scrollTop() / height | 0; addEventListener("resize", onresize, false); onresize(); //鼠标滚轮事件 document.body.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) { clearTimeout(itv); itv = setTimeout(function() { //判断滚轮滚的方向 var delta = e.wheelDelta / 120 || -e.deltaY / 3; page -= delta; var max = (document.body.scrollHeight / height | 0) - 1; if(page < 0) { return page = 0; } if(page > max) { return page = max; } move(); }, 100); e.preventDefault(); }); //当窗体发生变化时还是保证每次滚动滚一屏 function onresize() { height = body.offsetHeight; move(); }; function move() { var value = height * page; var diff = scrollTop() - value; (function callee() { diff = diff / 1.2 | 0; scrollTop(value + diff); if(diff) { itv = setTimeout(callee, 16); } })(); }; function scrollTop(v) { if(v == null) { return Math.max(body.scrollTop, html.scrollTop); } else { body.scrollTop = html.scrollTop = v; } } }) //点击楼层按钮跳到相应的楼层 var isMove=false; //点击右侧导航条 $(".louti li").on("click",function(){ isMove=true; //按钮变化 $(this).removeClass().addClass("active").siblings("li").removeClass("active"); //楼梯移动 var index=$(this).index(); var _topp=$(".staircase").eq(index).offset().top; $("html,body").stop().animate({scrollTop:_topp},200,function(){ isMove=false; }) }) //楼梯滚动导航条相对移动 $(window).scroll(function(){ //判断是否在滚动,如果没有,则支执行这里的代码 if(!isMove){ //获取滚动距离 var _scrollTop=$(document).scrollTop(); //遍历所有楼梯 $(".staircase").each(function(){ var _topp=$(this).offset().top; //判断滚动距离是否大于楼梯的top值 if(_scrollTop>=_topp){ var index=$(this).index(); $(".louti li").eq(index).removeClass().addClass("active") .siblings("li").removeClass("active"); } }) } })
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程!
相关推荐:
php公益培训视频教程
JavaScript图文教程
JavaScript在线手册
以上就是js实现全屏楼梯滚动效果(代码实现)的详细内容,更多请关注Gxl网其它相关文章!