JS實(shí)現(xiàn)移動(dòng)端整屏滑動(dòng)的實(shí)例代碼
更新時(shí)間：2017年11月10日 11:24:59 作者：蘇天天
本文通過(guò)實(shí)例代碼給大家分享了基于js 實(shí)現(xiàn)移動(dòng)端整屏滑動(dòng)效果，基本思路是檢測(cè)手指滑動(dòng)方向，獲取手指抬起時(shí)的位置，減去手指按下時(shí)的位置，得正即為向下滑動(dòng)了，具體實(shí)現(xiàn)代碼大家參考下本文
基本思路：
1）檢測(cè)手指滑動(dòng)方向：獲取手指抬起時(shí)的位置，減去手指按下時(shí)的位置，得正即為向下滑動(dòng)了
2）手指抬起后，向?qū)?yīng)反向操作改變當(dāng)前頁(yè)的位置
具體代碼如下：
html
<div id="wrap"> <div id="page01" class="pages">第一屏</div> <div id="page02" class="pages">第二屏</div> <div id="page03" class="pages">第三屏</div> <div id="page04" class="pages">第四屏</div> </div> <div id="dots"> <span class="now"></span><span class=""></span><span class=""></span><span class=""></span> </div>
css
*{
margin:0;
padding:0;
}
body{
overflow: hidden;
}
#wrap > div{
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分為兩塊
第一，設(shè)置html標(biāo)簽的font-size，以便設(shè)置rem的基數(shù) （放在頁(yè)面頭部）
document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth/10 + "px";
第二，具體的滑動(dòng)操作代碼
window.onload = function(){
var oDiv = document.getElementById("wrap");
var aPages = oDiv.getElementsByClassName("pages");
var aDots = document.getElementById("dots").getElementsByTagName("span");
var winH = window.innerHeight;
var tTime = 1;
//設(shè)置每頁(yè)的高度和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;
oDiv.style.height = winH + "px";
//手指拖動(dòng)事件（去除默認(rèn)動(dòng)作）
document.addEventListener("touchmove",function(e){
e.preventDefault();
});
var YStart = 0;
var iNow = 0;
//手指按下
oDiv.addEventListener("touchstart",function(e){
YStart = e.changedTouches[0].clientY;
});
//手指移動(dòng)
oDiv.addEventListener("touchmove",function(e){
disY = e.changedTouches[0].clientY-YStart; //向下滑正，向上滑負(fù)
});
//手指離開(kāi)
oDiv.addEventListener("touchend",function(e){
disY = e.changedTouches[0].clientY-YStart; //向下滑正，向上滑負(fù)
if(Math.abs(disY)>winH/20){ //只有當(dāng)滑動(dòng)距離大于了一定值得時(shí)候，才執(zhí)行切換
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;
oDiv.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;
oDiv.appendChild(aPages[0]);
},300)
}
}
}
好了，在給大家分享一段簡(jiǎn)單的代碼，JS實(shí)現(xiàn)移動(dòng)端整頁(yè)滑屏示，具體代碼如下所示：
<!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>移動(dòng)端整頁(yè)滑屏示例</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>
<div class="wrap" id="wrap">
<div class="wrap2" id="wrap2">
<div class="page">1</div>
<div class="page" style="background-color:#dddddd;">2</div>
<div class="page">3</div>
<div class="page" style="background-color:#dddddd;">4</div>
<div class="page">5</div>
<div class="page" style="background-color:#dddddd;">6</div>
</div>
</div>
<script type="text/javascript">
//重要！禁止移動(dòng)端滑動(dòng)的默認(rèn)事件
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)'; //根據(jù)手指的位置移動(dòng)頁(yè)面
};
//touchEnd
var touchend = function(event) {
//位移小于+-50的不翻頁(yè)
if(moveY < -50) n++;
if(moveY > 50) n--;
//最后&最前頁(yè)控制
if(n < 0) n = 0;
if(n > len - 1) n = len - 1;
//重定位
box2.style.transform = 'translateY(' + (-n * 10) + '%)'; //根據(jù)百分比位置移動(dòng)頁(yè)面
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, //一共有幾頁(yè)
n: 0 //頁(yè)面一打開(kāi)默認(rèn)在第幾頁(yè)？第一頁(yè)就是0，第二頁(yè)就是1
});
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的JS實(shí)現(xiàn)移動(dòng)端整屏滑動(dòng)的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- js實(shí)現(xiàn)移動(dòng)端tab切換時(shí)下劃線滑動(dòng)效果
- Swiper.js實(shí)現(xiàn)移動(dòng)端元素左右滑動(dòng)
- js原生實(shí)現(xiàn)移動(dòng)端手指滑動(dòng)輪播圖效果的示例
- js實(shí)現(xiàn)移動(dòng)端導(dǎo)航點(diǎn)擊自動(dòng)滑動(dòng)效果
- 原生javascript移動(dòng)端滑動(dòng)banner效果
- 基于JS實(shí)現(xiàn)移動(dòng)端向左滑動(dòng)出現(xiàn)刪除按鈕功能
- 基于slideout.js實(shí)現(xiàn)移動(dòng)端側(cè)邊欄滑動(dòng)特效
- 淺談移動(dòng)端之js touch事件 手勢(shì)滑動(dòng)事件
- JavaScript實(shí)現(xiàn)移動(dòng)端滑動(dòng)選擇日期功能
- JS實(shí)現(xiàn)移動(dòng)端上下滑動(dòng)一次一屏
相關(guān)文章
如何實(shí)現(xiàn)瀏覽器上的右鍵菜單...2006-07-07
這篇文章主要介紹了JS正則表達(dá)式封裝與使用操作,涉及javascript使用正則表達(dá)式針對(duì)郵箱、手機(jī)號(hào)、身份證、用戶名、中文等簡(jiǎn)單驗(yàn)證操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了js數(shù)組對(duì)象的includes方法使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
js點(diǎn)擊頁(yè)面其它地方將某個(gè)顯示的DIV隱藏
今天一朋友問(wèn)我 點(diǎn)擊一按鈕彈出一個(gè)DIV，然后要求點(diǎn)擊頁(yè)面其它地方隱藏這個(gè)DIV2012-07-07
這篇文章主要介紹了jQuery拖拽 & 彈出層，有需要的朋友可以參考一下2013-12-12
這篇文章主要介紹了手把手帶你入門(mén)微信小程序新框架Kbone的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
JavaScript中值類(lèi)型和引用類(lèi)型的區(qū)別
本文主要介紹了JavaScript中值類(lèi)型和引用類(lèi)型的區(qū)別，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
JS運(yùn)動(dòng)框架之分享側(cè)邊欄動(dòng)畫(huà)實(shí)例
這篇文章主要介紹了JS運(yùn)動(dòng)框架之分享側(cè)邊欄動(dòng)畫(huà),實(shí)例分析了javascript操作div及css的技巧,需要的朋友可以參考下2015-03-03
JavaScript 防抖和節(jié)流遇見(jiàn)的奇怪問(wèn)題及解決
這篇文章主要介紹了JavaScript 防抖和節(jié)流遇見(jiàn)的奇怪問(wèn)題及解決，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-11-11
javascript游戲開(kāi)發(fā)之《三國(guó)志曹操傳》零部件開(kāi)發(fā)(三)情景對(duì)話中仿打字機(jī)輸出文字
前兩講我告訴了大家如何使人物移動(dòng)，那么今天我們就來(lái)看看如何實(shí)現(xiàn)仿《三國(guó)志曹操傳》人物情景對(duì)話,感興趣的朋友可以了解下，希望本文對(duì)你有所幫助2013-01-01