JS를 사용하여 모바일 단말기에서 전체 화면 슬라이딩을 구현하는 방법
이 글에서는 예제 코드를 사용하여 js를 기반으로 모바일 장치에서 전체 화면 슬라이딩 효과를 구현하는 방법을 공유합니다. 기본 아이디어는 손가락의 슬라이딩 방향을 감지하고, 손가락이 들어올려지는 위치를 얻은 후 빼는 것입니다. 손가락을 눌렀을 때의 위치, 올바른 결과는 아래로 슬라이딩입니다. 이번 글에서는 모바일 단말에서 전체 화면 슬라이딩을 구현하는 JS 예제 코드를 공유하겠습니다.
기본 아이디어:
1) 손가락 미끄러지는 방향 감지: 손가락을 들었을 때 위치를 얻고, 손가락을 눌렀을 때 위치를 빼면 올바른 결과가 아래로 미끄러집니다
2) 손가락을 들어올립니다. Finger 마지막으로 현재 페이지의 위치를 해당 역연산으로 변경합니다
구체적인 코드는 다음과 같습니다.
html
<p id="wrap"> <p id="page01" class="pages">第一屏</p> <p id="page02" class="pages">第二屏</p> <p id="page03" class="pages">第三屏</p> <p id="page04" class="pages">第四屏</p> </p> <p id="dots"> <span class="now"></span><span class=""></span><span class=""></span><span class=""></span> </p>
css
*{
margin:0;
padding:0;
}
body{
overflow: hidden;
}
#wrap > p{
width: 10rem;
position: absolute;
left: 0;
top: 0;
background: #fff;
transition: all 0.3s ease;
}
#dots{
position: fixed;
right: 5px;
top: 40%;
z-index: 9;
}
#dots span{
display: block;
height: 0.2rem;
width: 0.2rem;
border: 1px solid #000;
border-radius: 50%;
margin-bottom: 3px;
}
#dots .now{
background: #555;
}js는 두 부분으로 나누어집니다
먼저 글꼴을 설정합니다- html 태그를 설정할 수 있는 크기 rem의 기본(페이지 상단에 위치)
document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth/10 + "px";둘째, 특정 슬라이딩 연산 코드
window.onload = function(){
var op = document.getElementById("wrap");
var aPages = op.getElementsByClassName("pages");
var aDots = document.getElementById("dots").getElementsByTagName("span");
var winH = window.innerHeight;
var tTime = 1;
//设置每页的高度和zindex值
for(var i=0; i<aPages.length; i++){
aPages[i].style.height = winH + "px";
aPages[i].style.zIndex = 1;
}
aPages[0].style.zIndex = 3;
aPages[1].style.zIndex = 2;
op.style.height = winH + "px";
//手指拖动事件（去除默认动作）
document.addEventListener("touchmove",function(e){
e.preventDefault();
});
var YStart = 0;
var iNow = 0;
//手指按下
op.addEventListener("touchstart",function(e){
YStart = e.changedTouches[0].clientY;
});
//手指移动
op.addEventListener("touchmove",function(e){
disY = e.changedTouches[0].clientY-YStart; //向下滑正，向上滑负
});
//手指离开
op.addEventListener("touchend",function(e){
disY = e.changedTouches[0].clientY-YStart; //向下滑正，向上滑负
if(Math.abs(disY)>winH/20){ //只有当滑动距离大于了一定值得时候，才执行切换
if(disY<0){
iNow++;
if(iNow>=aDots.length){
iNow = 0;
}
aPages[0].style.transform = "translateY("+ -winH +"px)";
doSlide();
}else{
iNow--;
if(iNow<0){
iNow = aDots.length-1;
}
aPages[0].style.transform = "translateY("+ winH +"px)";
doSlide("up");
}
}
});
function doSlide(upflag){
for(var i=0;i<aDots.length;i++){
aDots[i].className = "";
}
aDots[iNow].className = "now";
if(upflag){
//向上滑
aPages[3].style.zIndex = 2;
aPages[1].style.zIndex = 1;
op.insertBefore(aPages[3],aPages[1]);
setTimeout(function(){
aPages[1].style.transform = "translateY(0px)";
aPages[1].style.zIndex = 2;
aPages[0].style.zIndex = 3;
},300)
}else{
setTimeout(function(){
aPages[0].style.transform = "translateY(0px)";
aPages[0].style.zIndex = 1;
aPages[1].style.zIndex = 3;
aPages[2].style.zIndex = 2;
op.appendChild(aPages[0]);
},300)
}
}
}자, 간단한 코드를 공유하겠습니다. JS는 모바일 단말기에서 전체 페이지의 슬라이딩 화면 표시를 구현합니다. 구체적인 코드는 다음과 같습니다. 표시:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>移动端整页滑屏示例</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
font-family: Verdana;
}
body,
html {
height: 100%;
background-color: #000000;
}
.wrap {
width: 100%;
height: 100%;
overflow: hidden;
}
.wrap2 {
width: 100%;
height: 1000%;
transition: 0.3s linear
}
.page {
width: 100%;
height: 10%
}
.page {
background-color: #fdfdfd;
font-size: 100px;
line-height: 400px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<p class="wrap" id="wrap">
<p class="wrap2" id="wrap2">
<p class="page">1</p>
<p class="page" style="background-color:#dddddd;">2</p>
<p class="page">3</p>
<p class="page" style="background-color:#dddddd;">4</p>
<p class="page">5</p>
<p class="page" style="background-color:#dddddd;">6</p>
</p>
</p>
<script type="text/javascript">
//重要！禁止移动端滑动的默认事件
document.body.addEventListener('touchmove', function(event) {
event = event ? event : window.event;
if(event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false
}
}, false)
var pages = function(obj) {
var box = document.getElementById(obj.wrap);
var box2 = document.getElementById(obj.wrap2);
var len = obj.len;
var n = obj.n;
var startY, moveY, cliH;
//获取屏幕高度
var getH = function() {
cliH = document.body.clientHeight
};
getH();
window.addEventListener('resize', getH, false);
//touchStart
var touchstart = function(event) {
if(!event.touches.length) {
return;
}
startY = event.touches[0].pageY;
moveY = 0;
};
//touchMove
var touchmove = function(event) {
if(!event.touches.length) {
return;
}
moveY = event.touches[0].pageY - startY;
box2.style.transform = 'translateY(' + (-n * cliH + moveY) + 'px)'; //根据手指的位置移动页面
};
//touchEnd
var touchend = function(event) {
//位移小于+-50的不翻页
if(moveY < -50) n++;
if(moveY > 50) n--;
//最后&最前页控制
if(n < 0) n = 0;
if(n > len - 1) n = len - 1;
//重定位
box2.style.transform = 'translateY(' + (-n * 10) + '%)'; //根据百分比位置移动页面
console.log(n)
};
//touch事件绑定
box.addEventListener("touchstart", function(event) {
touchstart(event)
}, false);
box.addEventListener("touchmove", function(event) {
touchmove(event)
}, false);
box.addEventListener("touchend", function(event) {
touchend(event)
}, false);
};
pages({
wrap: 'wrap', //.wrap的id
wrap2: 'wrap2', //.wrap2的id
len: 6, //一共有几页
n: 0 //页面一打开默认在第几页？第一页就是0，第二页就是1
});
</script>
</body>
</html>관련 권장 사항:
CSS를 사용하여 모바일 단말기에서 왼쪽 및 오른쪽 슬라이딩을 구현하는 방법의 예
왼쪽 슬라이딩 삭제 효과를 구현하는 WeChat 애플릿
JS(Imitate Vanke) 하단의 새로운 슬라이딩 효과 구현 코드
위 내용은 JS를 사용하여 모바일 단말기에서 전체 화면 슬라이딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7369
15
1628
14
1355
52
1266
25
1215
29
WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법
Dec 17, 2023 pm 02:54 PM
WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.
WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술
Dec 17, 2023 pm 05:30 PM
WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술
휴대폰 화면이 미끄러지거나 건조해지면 어떻게 해야 하나요?
Dec 04, 2023 pm 03:51 PM
미끄러지거나 건조되기 어려운 휴대폰 화면에 대한 솔루션: 1. 화면을 정기적으로 청소합니다. 3. 손가락의 미끄러짐 강도를 높입니다. 4. 휴대폰 화면 보호 장치를 교체합니다. 6. 손을 촉촉하게 유지하십시오. 7. 필름을 붙일 때 깨끗하게 다루십시오. 8. 윤활제를 사용하십시오. 10. 화면 밝기를 조정하십시오. 자세한 소개: 1. 화면을 가습하고 화면 옆에 가습기를 두거나 물을 뿌려 공기 중 습도를 높여 화면의 건조함을 줄입니다. 2. 화면을 정기적으로 청소하고 전문 화면 세척제를 사용합니다.
WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법
Dec 17, 2023 am 09:39 AM
WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.
JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법
Dec 17, 2023 pm 12:09 PM
JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면
JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축
Dec 17, 2023 pm 05:13 PM
JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리
간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법
Jan 05, 2024 pm 06:08 PM
JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용
JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법
Jan 05, 2024 pm 01:37 PM
JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가
