手机滑动网站翻页php代码,JS实现移动端整屏滑动的实例代码

基本思路：

1)检测手指滑动方向：获取手指抬起时的位置，减去手指按下时的位置，得正即为向下滑动了

2)手指抬起后，向对应反向操作改变当前页的位置

具体代码如下：

html

第一屏

第二屏

第三屏

第四屏

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分为两块

第一，设置html标签的font-size，以便设置rem的基数 (放在页面头部)

document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth/10 + "px";

第二，具体的滑动操作代码

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;

//设置每页的高度和zindex值

for(var i=0; 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";

//手指拖动事件(去除默认动作)

document.addEventListener("touchmove",function(e){

e.preventDefault();

});

var YStart = 0;

var iNow = 0;

//手指按下

oDiv.addEventListener("touchstart",function(e){

YStart = e.changedTouches[0].clientY;

});

//手指移动

oDiv.addEventListener("touchmove",function(e){

disY = e.changedTouches[0].clientY-YStart; //向下滑正，向上滑负

});

//手指离开

oDiv.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[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)

}

}

}

好了，在给大家分享一段简单的代码，JS实现移动端整页滑屏示，具体代码如下所示：

移动端整页滑屏示例

* {

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;

}

1

2

3

4

5

6

//重要！禁止移动端滑动的默认事件

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

});

总结

以上所述是小编给大家介绍的JS实现移动端整屏滑动的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！