JS implements sliding up and down on the mobile terminal one screen at a time
|
This article shares with you the specific code of JS to achieve the mobile terminal sliding up and down one screen at a time for your reference. The specific content is as follows The functions are as follows:
Above code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
-moz-user-select: none;
/* Firefox */
-webkit-user-select: none;
/*webkit browser*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/* Early browsers */
user-select: none;
}
#box {
width: 350px;
height: 500px;
margin: 30px auto;
border-radius: 5px;
box-shadow: 0px 0px 27px -3px red;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
overflow: hidden;
position: relative;
background-color: #ccc;
}
.childbox {
width: 300%;
height: 100%;
display: flex;
position: absolute;
top: 0;
left: 0;
}
.childbox>div {
flex: 1;
height: 100%;
}
.child1 {
background-color: salmon;
}
.child2 {
background-color: greenyellow;
}
.child3 {
background-color: blueviolet;
}
.nav_box {
position: absolute;
width: 100%;
text-align: center;
line-height: 50px;
}
.nav_box div {
display: inline-block;
color: #fff;
margin: 0 5px;
position: relative;
}
.active_nav::before {
content: '';
position: absolute;
background-color: #fff;
left: 2px;
bottom: 7px;
width: 27px;
height: 2px;
}
.childbox>div {
position: relative;
}
.childbox>div .listview {
width: 100%;
position: absolute;
}
.view_child {
text-align: center;
line-height: 200px;
color: #fff;
font-size: 25px;
}
</style>
</head>
<body>
<div id="box">
<div class="childbox">
<div class="child1">
<div class="listview" type="near">
</div>
</div>
<div class="child2">
<div class="listview" type="Follow">
</div>
</div>
<div class="child3">
<div class="listview" type="recommend">
</div>
</div>
</div>
<div class="nav_box">
<div>Nearby</div>
<div>Follow</div>
<div class="active_nav">Recommendations</div>
</div>
</div>
</body>
<script>
//Get the animation box let childbox = document.querySelector('.childbox')
//Get the height of the screen let viewheight = document.querySelector('#box').offsetHeight
//Get all navigation let childnav = document.querySelector('.nav_box').querySelectorAll('div')
//Get the video type box let viewlist = document.querySelectorAll('.listview')
//Navigation index (0, nearby, 1, attention, 2 recommended)
let indextype = 2
//Index of video playback (0: Nearby, 1: Follow, 2: Recommended) [subscript, number of videos, page number]
let view_index = {
0: [0, 0, 1],
1: [0, 0, 1],
2: [0, 0, 1]
}
//Initialize navigation set_nav_active(indextype)
//Navigation selected state function set_nav_active(index) {
// Clear the selected state for (let i = 0; i < childnav.length; i++) {
childnav[i].className = ''
}
//Add value to the selected childnav[index].className = 'active_nav'
//Change the box position childbox.style.left = index * -100 + '%'
}
//Add click event to navigation for (let i = 0; i < childnav.length; i++) {
childnav[i].onclick = function () {
//Add transition animation childbox.style.transition = 'all 0.5s'
//Change click navigation status indextype = i
set_nav_active(indextype)
}
}
//Slide left and right let box = document.querySelector('#box')
//Whether the animation is finished let transition_status = true
//Press box.onmousedown = function (event) {
//Determine whether the animation can be executed if (!transition_status) {
return
}
//Get the coordinate value let startY = event.clientY
let startX = event.clientX
//Whether to proceed to judgment let t_l_type = true
//Get the state of up-down or left-right sliding (0: no movement; 1: left-right; 2: up-down)
let move_type = 0
//Record animation behavior (1: pull down, 2: up and down, 3: left and right, 0: no movement)
let transition_type = 0
// Left and right start
// Clear box animation childbox.style.transition = ''
//Get the left position of the box let startleft = childbox.offsetLeft
//Whether to switch sliding let type = {
a: false,
b: ''
}
//left and right over
//Slide up and down //Initialization position of sliding let startTop = viewlist[indextype].offsetTop
//Judge whether to switch let top_type_view = {
a: false, //Switch or not b: '', //Judge whether to switch up or down}
console.log(startTop)
//Up and down
//Pull down to refresh //Clear animation viewlist[indextype].style.transition = '';
//Record the pull-down distance let b_top = 0
//Pull down over
document.onmousemove = function (event) {
//Get the coordinates when moving let moveY = event.clientY
let moveX = event.clientX
//Add a switch to determine whether to add a switch if (t_l_type) {
//Judge whether to slide left or right or up or down if (Math.abs(moveY - startY) > 5) {
//Stop the next judgment t_l_type = false
//Record sliding status move_type = 2
}
if (Math.abs(moveX - startX) > 5) {
//Stop the next judgment t_l_type = false
//Record sliding status move_type = 1
}
}
//Judge the sliding code if (move_type == 2) {
// Pulling down requires two conditions 1. There is nothing on the pull-down 2 if (view_index[indextype][0] == 0 && moveY - startY > 0) {
console.log('pull down')
//Change animation state transition_type = 1
//Calculate the pull-down distance b_top = moveY - startY
// Pull the view box viewlist[indextype].style.top = b_top + 'px'
return
}
//Execute up and down sliding //Refuse to slide up and down when pulling down if (transition_type != 1) {
//Change animation state transition_type = 2
//Moving position let moveY = event.clientY
//Calculate the distance to move up and down let num = moveY - startY
//Change the top value of the drag element viewlist[indextype].style.top = startTop + num + 'px'
//Judge whether to switch if (num > 70) {
top_type_view.a = true
top_type_view.b = 'Top'
} else if (num < -70) {
top_type_view.a = true
top_type_view.b = 'bottom'
}
}
} else if (move_type == 1) {
// Code on the left and right // Change animation state transition_type = 3
//Moving position let moveX = event.clientX
//Moving distance let num = moveX - startX
//The left value required by the box childbox.style.left = startleft + num + 'px'
//Sliding direction if (moveX > startX) {
if (num > 100) {
type.a = true
type.b = 'right'
}
} else if (moveX < startX) {
if (num < -100) {
type.a = true
type.b = 'left'
}
}
// over
}
}
//Raise window.onmouseup = function () {
//Clear sliding event document.onmousemove = ''
//Judge the execution animation if (transition_type == 1) {
//Pull down//Add animation viewlist[indextype].style.transition = 'all .5s';
//Judge the distance of the pull to determine whether to refresh if (b_top > 70) {
//Execute animation transition_status = false
viewlist[indextype].style.top = '70px'
setTimeout(function () {
viewlist[indextype].style.top = '0px'
//Start from the first page view_index[indextype][2] = 1
autoview(indextype)
//Restore animation setTimeout(() => {
transition_status = true
}, 500);
}, 2000)
} else {
viewlist[indextype].style.top = '0px'
}
} else if (transition_type == 2) {
//Up and down //Add transition animation viewlist[indextype].style.transition = 'all .5s';
//Judge the animation to be executed if (top_type_view.a) {
//Judge up and down switching if (top_type_view.b == 'up') {
//Subscript change view_index[indextype][0]--
if (view_index[indextype][0] <= -1) {
view_index[indextype][0] = 0
}
viewlist[indextype].style.top = view_index[indextype][0] * -viewheight + 'px'
console.log('up')
} else if (top_type_view.b == 'down') {
view_index[indextype][0]++
if (view_index[indextype][0] >= view_index[indextype][1] - 2) {
//Generate a new video autoview(indextype)
}
viewlist[indextype].style.top = view_index[indextype][0] * -viewheight + 'px'
}
} else {
//Restore the existing state viewlist[indextype].style.top = startTop + 'px'
}
} else if (transition_type == 3) {
//Left and right //Execute to determine whether to switch if (type.a) {
if (type.b === 'left') {
indextype++
if (indextype >= 3) {
indextype = 2
}
} else if (type.b === 'right') {
indextype--
if (indextype <= -1) {
indextype = 0
}
}
}
//Add transition childbox.style.transition = 'all 0.5s'
//Call the switching function set_nav_active(indextype)
}
//Restore next judgment t_l_type = true
//Restore next state move_type = 0
//Restore animation state transition_type = 0
}
}
//Random background color function autocolor() {
return `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`
}
//Generate video list by default for (let i = 0; i < viewlist.length; i++) {
autoview(i)
}
//Generate video list function autoview(index) {
//Get the video type let type = viewlist[index].getAttribute('type')
//Change the number of videos if (view_index[index][2] == 1) {
// Clear existing content viewlist[indextype].innerHTML = ''
//Record video quantity view_index[index][1] = 10
} else {
//Accumulate the number of videos view_index[index][1] += 10
}
//index inserted subscript for (let i = 0; i < 10; i++) {
//Create dom
let div = document.createElement('div')
//Name div.className = 'view_child'
//Content div.innerHTML = `
<div>${type}:${(view_index[index][2] - 1) * 10 + i + 1}</div>
<hr></hr>
<div>Page number: ${view_index[index][2]}</div>
`
//Set the background color div.style.backgroundColor = autocolor()
//Set the box height div.style.height = viewheight + 'px'
//Append viewlist[index].appendChild(div)
}
//Change the next page number view_index[index][2]++
console.log(view_index)
}
//Double click to stick to top let nav_box = document.querySelector('.nav_box')
nav_box.ondblclick = function () {
viewlist[indextype].style.transition = 'all .5s'
viewlist[indextype].style.top = '0px'
view_index[indextype][0] = 0
}
</script>
</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:
|
<<: Summary of the differences between MySQL storage engines MyISAM and InnoDB
>>: How to develop Java 8 Spring Boot applications in Docker
Recommend
Solution to the problem of incomplete display of select drop-down box content in HTML and partial coverage
Today, I encountered a problem: the content in the...
Nginx handles http request implementation process analysis
Nginx first decides which server{} block in the c...
Solve the matching problem in CSS
Problem Description As we all know, when writing ...
Centos6.9 installation Mysql5.7.18 step record
Installation sequence rpm -ivh mysql-community-co...
Detailed explanation of nginx front-end distribution method based on $remote_addr
The requirements are as follows: There are multip...
Linux configuration without password login stand-alone and full distribution detailed tutorial
Table of contents 1: Single machine password-free...
Encoding problems and solutions when mysql associates two tables
When Mysql associates two tables, an error messag...
Nginx access log and error log parameter description
illustrate: There are two main types of nginx log...
3 solutions to make your website support old versions of IE6, 7, 8, and 9 browsers
Although Microsoft has done a lot of research and ...
Detailed explanation of the 8 attribute values of the background attribute (interview question)
The value of the background property in CSS backg...
Answer the caching principle of keep-alive components from the perspective of source code
Today, let’s get straight to the point and talk a...
How to use tcpdump to capture packets in Linux system
Let me look at the example code first: 1. Common ...
Alibaba Cloud Server Ubuntu Configuration Tutorial
Since Alibaba Cloud's import of custom Ubuntu...
Tutorial on using Multitail command on Linux
MultiTail is a software used to monitor multiple ...
Express implements login verification
This article example shares the specific code for...