js to achieve floor scrolling effect
|
This article uses jQuery to implement the sliding staircase effect, scroll the floors, and click the floor button to jump to the corresponding floor. The code is as follows HTML code:
<div style="height: 500px; background-color: black; color: #fff;">Meaningless text</div>
<div class="layerbox">
<div class="layer num1">Layer 1</div>
<div class="layer num2">Layer 2</div>
<div class="layer num3">The third layer</div>
<div class="layer num4">Layer 4</div>
</div>
<div class="nav">
<ul>
<li>1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
</ul>
</div>
CSS code:
* {
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 code:
<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) {
//The page offset, the original page scroll distance var scrollTop = document.documentElement.scrollTop
var offsetTop = layers[i].offsetTop
if (scrollTop > offsetTop) {
// Scroll bar moves up var timer = setInterval(function () {
if (scrollTop > offsetTop) {
scrollTop -= 40
if (scrollTop - offsetTop < 40) {
// If the distance to the last hole is less than 40, set the offset to 0 directly
window.scrollTo(0, offsetTop)
} else {
window.scrollTo(0, scrollTop)
}
} else {
clearInterval(timer)
}
}, 50)
} else {
// Scroll bar moves down // 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) {
// The scrolled floor reaches the top range and disappears lis[i].classList.add("active")
} else {
lis[i].classList.remove("active")
}
})
}
</script>The editor will share with you another piece of code: jquery floor scrolling special effects
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq floor scrolling effect</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>Clothing</span></li>
<li><i>2F</i><span>Beauty</span></li>
<li><i>3F</i><span>Mobile phone</span></li>
<li style="border-bottom: none;"><i>4F</i><span>Home appliances</span></li>
</ul>
<div id="goTop">
<span id="erweima">I am a QR code</span> Top
</div>
<div id="header">Header</div>
<div id="main">
<div class="louceng" style="background: papayawhip;">Clothing</div>
<div class="louceng" style="background: peachpuff;">Beauty</div>
<div class="louceng" style="background: peru;">Mobile phone</div>
<div class="louceng" style="background: pink;">Home appliances</div>
</div>
<script>
var oNav = $('#LoutiNav'); //Navigation shell var aNav = oNav.find('li'); //Navigation var aDiv = $('#main .louceng'); //Floor var oTop = $('#goTop'); //Back to top $(window).scroll(function() {
//Visible window height var winH = $(window).height();
//Mouse scrolling distance var iTop = $(window).scrollTop();
if(iTop >= $("#header").height()) {
oNav.fadeIn();
oTop.fadeIn();
//Mouse sliding style changes 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();
}
})
//Click to return to the current floor aNav.click(function() {
var t = aDiv.eq($(this).index()).offset().top;
$('body,html').animate({
"scrollTop": t
}, 500);
$(this).addClass('active').siblings().removeClass('active');
});
//Back to the top oTop.click(function() {
$('body,html').animate({
"scrollTop": 0
}, 500)
})
</script>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Docker builds python Flask+ nginx+uwsgi container
>>: js to achieve simple drag effect
Recommend
SSM projects are frequently deployed as war packages, using tomcat and maven to implement hot deployment configuration
background As we all know, after we develop a Jav...
User needs lead to marketing-oriented design
<br />For each of our topics, the team will ...
The basic use of html includes links, style sheets, span and div, etc.
1. Links Hypertext links are very important in HTM...
MySQL master-slave replication principle and practice detailed explanation
Table of contents Introduction effect principle f...
Bootstrap 3.0 study notes for beginners
As the first article of this study note, we will ...
Solution to Nginx SSL certificate configuration error
1. Introduction When a web project is published o...
abbr mark and acronym mark
The <abbr> and <acronym> tags represen...
SpringBoot integrates Activiti7 implementation code
After the official release of Activiti7, it has f...
Docker cross-server communication overlay solution (Part 1) Consul single instance
Table of contents Scenario Task idea analyze Conc...
Detailed explanation of CSS text decoration text-decoration & text-emphasis
In CSS, text is one of the most common things we ...
A brief discussion on the use of GROUP BY and HAVING in SQL statements
Before introducing the GROUP BY and HAVING clause...
Detailed explanation of nginx reverse proxy webSocket configuration
Recently, I used the webSocket protocol when work...
Detailed explanation of how to deploy SpringBoot in docker and replace jar packages
Table of contents Project Directory Dockerfile Fi...
MySQL 5.7 zip archive version installation tutorial
This article shares the installation tutorial of ...
HTML form tag tutorial (1):
Forms are a major external form for implementing ...