JS 는 모 바 일 에서 상하 로 한 번 미 끄 러 지 는 것 을 실현 합 니 다.
기능 은 다음 과 같 습 니 다.
머리:근처,관심,추천 옵션 의 전환4
옵션 카드 를 더 블 클릭 하여 맨 위로 돌아 갑 니 다
상위 코드:
<!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;
/* */
-webkit-user-select: none;
/*webkit */
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/* */
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=" ">
</div>
</div>
<div class="child2">
<div class="listview" type=" ">
</div>
</div>
<div class="child3">
<div class="listview" type=" ">
</div>
</div>
</div>
<div class="nav_box">
<div> </div>
<div> </div>
<div class="active_nav"> </div>
</div>
</div>
</body>
<script>
//
let childbox = document.querySelector('.childbox')
//
let viewheight = document.querySelector('#box').offsetHeight
//
let childnav = document.querySelector('.nav_box').querySelectorAll('div')
//
let viewlist = document.querySelectorAll('.listview')
// （0, ,1, ，2 ）
let indextype = 2
// (0: ,1: ,2: )[ , , ]
let view_index = {
0: [0, 0, 1],
1: [0, 0, 1],
2: [0, 0, 1]
}
//
set_nav_active(indextype)
//
function set_nav_active(index) {
//
for (let i = 0; i < childnav.length; i++) {
childnav[i].className = ''
}
//
childnav[index].className = 'active_nav'
//
childbox.style.left = index * -100 + '%'
}
//
for (let i = 0; i < childnav.length; i++) {
childnav[i].onclick = function () {
//
childbox.style.transition = 'all 0.5s'
//
indextype = i
set_nav_active(indextype)
}
}
//
let box = document.querySelector('#box')
//
let transition_status = true
//
box.onmousedown = function (event) {
//
if (!transition_status) {
return
}
//
let startY = event.clientY
let startX = event.clientX
//
let t_l_type = true
// (0: ;1: ;2: )
let move_type = 0
// (1: ,2: ，3： ，0： )
let transition_type = 0
// start
//
childbox.style.transition = ''
// left
let startleft = childbox.offsetLeft
//
let type = {
a: false,
b: ''
}
// over
//
//
let startTop = viewlist[indextype].offsetTop
//
let top_type_view = {
a: false, //
b: '', //
}
console.log(startTop)
// over
//
//
viewlist[indextype].style.transition = '';
//
let b_top = 0
// over
document.onmousemove = function (event) {
//
let moveY = event.clientY
let moveX = event.clientX
//
if (t_l_type) {
//
if (Math.abs(moveY - startY) > 5) {
//
t_l_type = false
//
move_type = 2
}
if (Math.abs(moveX - startX) > 5) {
//
t_l_type = false
//
move_type = 1
}
}
//
if (move_type == 2) {
// 1 2
if (view_index[indextype][0] == 0 && moveY - startY > 0) {
console.log(' ')
//
transition_type = 1
//
b_top = moveY - startY
//
viewlist[indextype].style.top = b_top + 'px'
return
}
//
//
if (transition_type != 1) {
//
transition_type = 2
//
let moveY = event.clientY
//
let num = moveY - startY
// top
viewlist[indextype].style.top = startTop + num + 'px'
//
if (num > 70) {
top_type_view.a = true
top_type_view.b = ' '
} else if (num < -70) {
top_type_view.a = true
top_type_view.b = ' '
}
}
} else if (move_type == 1) {
//
//
transition_type = 3
//
let moveX = event.clientX
//
let num = moveX - startX
// left
childbox.style.left = startleft + num + 'px'
//
if (moveX > startX) {
if (num > 100) {
type.a = true
type.b = ' '
}
} else if (moveX < startX) {
if (num < -100) {
type.a = true
type.b = ' '
}
}
// over
}
}
//
window.onmouseup = function () {
//
document.onmousemove = ''
//
if (transition_type == 1) {
//
//
viewlist[indextype].style.transition = 'all .5s';
//
if (b_top > 70) {
//
transition_status = false
viewlist[indextype].style.top = '70px'
setTimeout(function () {
viewlist[indextype].style.top = '0px'
//
view_index[indextype][2] = 1
autoview(indextype)
//
setTimeout(() => {
transition_status = true
}, 500);
}, 2000)
} else {
viewlist[indextype].style.top = '0px'
}
} else if (transition_type == 2) {
//
//
viewlist[indextype].style.transition = 'all .5s';
//
if (top_type_view.a) {
//
if (top_type_view.b == ' ') {
//
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(' ')
} else if (top_type_view.b == ' ') {
view_index[indextype][0]++
if (view_index[indextype][0] >= view_index[indextype][1] - 2) {
//
autoview(indextype)
}
viewlist[indextype].style.top = view_index[indextype][0] * -viewheight + 'px'
}
} else {
//
viewlist[indextype].style.top = startTop + 'px'
}
} else if (transition_type == 3) {
//
//
if (type.a) {
if (type.b === ' ') {
indextype++
if (indextype >= 3) {
indextype = 2
}
} else if (type.b === ' ') {
indextype--
if (indextype <= -1) {
indextype = 0
}
}
}
//
childbox.style.transition = 'all 0.5s'
//
set_nav_active(indextype)
}
//
t_l_type = true
//
move_type = 0
//
transition_type = 0
}
}
//
function autocolor() {
return `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`
}
//
for (let i = 0; i < viewlist.length; i++) {
autoview(i)
}
//
function autoview(index) {
//
let type = viewlist[index].getAttribute('type')
//
if (view_index[index][2] == 1) {
//
viewlist[indextype].innerHTML = ''
//
view_index[index][1] = 10
} else {
//
view_index[index][1] += 10
}
//index
for (let i = 0; i < 10; i++) {
// dom
let div = document.createElement('div')
//
div.className = 'view_child'
//
div.innerHTML = `
<div>${type}:${(view_index[index][2] - 1) * 10 + i + 1}</div>
<hr></hr>
<div> ：${view_index[index][2]}</div>
`
//
div.style.backgroundColor = autocolor()
//
div.style.height = viewheight + 'px'
//
viewlist[index].appendChild(div)
}
//
view_index[index][2]++
console.log(view_index)
}
//
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>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
