js實現樓層滾動效果
阿新 • • 發佈:2021-09-23
本文例項為大家分享了實現滑動樓梯效果,實現樓層的滾動以及點選樓層按鈕跳轉到對應的樓層,程式碼如下
html程式碼:
<div style="height: 500px; background-color: black; color: #fff;">無意義的文字</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>
程式碼:
* { 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; }
程式碼:
<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 > zRBuUhoffsetTop) { 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,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; } http://www.cppcns.com 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; } #www.cppcns.comerweima { width: 130px; height: 130px; background: palegreen; display: none; position: absolute; right: 46px; bottom: 5px; http://www.cppcns.com 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 style="border-bottom: none;"><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" style="background: papayawhip;">服飾</div> <div class="louceng" style="background: peachpuff;">美妝</div> <div class="louceng" style="background: peru;">手機</div> <div class="louceng" style="background: pink;">家電</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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。