您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
小编给大家分享一下js如何实现楼层滚动效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
html代码:
<div >无意义的文本</div> <div class="layerbox"> <div class="layer num1">第一层</div> <div class="layer num2">第二层</div> <div class="layer num3">第三层</div> <div class="layer num4">第四层</div> </div> <div class="nav"> <ul> <li>1F</li> <li>2F</li> <li>3F</li> <li>4F</li> </ul> </div>
css代码:
* { margin: 0; padding: 0; } .layer { height: 300px; font-size: 80px; color: white; text-align: center; } .num1 { background-color: red; } .num2 { background-color: blue; } .num3 { background-color: yellow; } .num4 { background-color: green; } .nav { position: fixed; right: 50px; bottom: 400px; background-color: pink; } ul { list-style: none; } ul li { padding: 10px; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 1px solid #000; } ul li.active { background-color: crimson; }
js代码:
<script> var layers = document.querySelectorAll(".layer") var lis = document.querySelectorAll('li') for (let i = 0; i < lis.length; i++) { const li = lis[i] li.onclick = function (e) { //页面的偏移量,原来的页面滚动的距离 var scrollTop = document.documentElement.scrollTop var offsetTop = layers[i].offsetTop if (scrollTop > offsetTop) { // 滚动条向上移动 var timer = setInterval(function () { if (scrollTop > offsetTop) { scrollTop -= 40 if (scrollTop - offsetTop < 40) { // 如果最后一洞的距离小于40时,直接设置偏移量为0 window.scrollTo(0, offsetTop) } else { window.scrollTo(0, scrollTop) } } else { clearInterval(timer) } }, 50) } else { // 滚动条向下移动 // scrollTop <= offsetTop var timer = setInterval(function () { if (scrollTop < offsetTop) { scrollTop += 40 if (offsetTop - scrollTop < 40) { window.scrollTo(0, offsetTop) } else { window.scrollTo(0, scrollTop) } } else { clearInterval(timer) } }, 50); } } } window.onscroll = function (e) { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop layers.forEach(function (v, i) { if (v.clientHeight + v.offsetTop > scrollTop && scrollTop > v.offsetTop) { // 滚动的楼层到达顶部范围,离开消失 lis[i].classList.add("active") } else { lis[i].classList.remove("active") } }) } </script>
小编再为大家分享一段代码:jquery楼层滚动特效
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq 楼层滚动效果</title> <style> * { margin: 0; padding: 0; } i { font-style: normal; } ul, li, dl, ol{ list-style: none; } #LoutiNav { border: 1px solid gray; width: 30px; position: fixed; top: 150px; left: 50px; display: none; } #LoutiNav li { width: 30px; height: 30px; border-bottom: 1px solid gray; line-height: 30px; text-align: center; cursor: pointer; } #LoutiNav span { display: none; } #LoutiNav .active { background: white; color: darkred; } #LoutiNav li:hover span { display: block; font-size: 12px; background: darkred; color: white; } #LoutiNav li:hover i { display: none; } #goTop { width: 40px; height: 40px; line-height: 40px; text-align: center; background: gray; position: fixed; bottom: 30px; right: 30px; cursor: pointer; border-radius: 5px; display: none; } #goTop:hover { background: darkred; color: white; } #goTop:hover span { display: block; } #erweima { width: 130px; height: 130px; background: palegreen; display: none; position: absolute; right: 46px; bottom: 5px; line-height: 130px; text-align: center; font-size: 20px; border-radius: 10px; } #header { height: 200px; background: palegoldenrod; text-align: center; line-height: 200px; font-size: 72px; margin: 0 auto; } .louceng { height: 810px; text-align: center; line-height: 610px; font-size: 120px; margin: 0 auto; } </style> <script src="js/jquery-1.7.2.min.js"></script> </head> <body> <ul id="LoutiNav"> <li class="active"><i>1F</i><span>服饰</span></li> <li><i>2F</i><span>美妆</span></li> <li><i>3F</i><span>手机</span></li> <li ><i>4F</i><span>家电</span></li> </ul> <div id="goTop"> <span id="erweima">我是二维码</span> Top </div> <div id="header">头部</div> <div id="main"> <div class="louceng" >服饰</div> <div class="louceng" >美妆</div> <div class="louceng" >手机</div> <div class="louceng" >家电</div> </div> <script> var oNav = $('#LoutiNav'); //导航壳 var aNav = oNav.find('li'); //导航 var aDiv = $('#main .louceng'); //楼层 var oTop = $('#goTop'); //回到顶部 $(window).scroll(function() { //可视窗口高度 var winH = $(window).height(); //鼠标滚动的距离 var iTop = $(window).scrollTop(); if(iTop >= $("#header").height()) { oNav.fadeIn(); oTop.fadeIn(); //鼠标滑动样式改变 aDiv.each(function() { if(winH + iTop - $(this).offset().top > winH / 2) { aNav.removeClass('active'); aNav.eq($(this).index()).addClass('active'); } }) } else { oNav.fadeOut(); oTop.fadeOut(); } }) //点击回到当前楼层 aNav.click(function() { var t = aDiv.eq($(this).index()).offset().top; $('body,html').animate({ "scrollTop": t }, 500); $(this).addClass('active').siblings().removeClass('active'); }); //回到顶部 oTop.click(function() { $('body,html').animate({ "scrollTop": 0 }, 500) }) </script> </body> </html>
看完了这篇文章,相信你对“js如何实现楼层滚动效果”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。