移动端H5页面，上下滑动翻页

最新推荐文章于 2024-09-21 13:25:19 发布
最新推荐文章于 2024-09-21 13:25:19 发布
阅读量1.1w 收藏 4
点赞数
分类专栏： 代码问题 文章标签： 移动端滑动
原文链接：https://blog.csdn.net/qq_16494241/article/details/78095575
版权

移动端H5页面，上下滑动翻页
向上滑动进入下一页 ， 当前页（加CSS样式outTop）向上移动移出窗口 ，下一页（加CSS样式inTop）向上移动进入窗口
向下滑动进入前一页 ， 当前页（加CSS样式outDown）向下移动移出窗口 ，下一页（加CSS样式inDown）向下移动进入窗口
同时设置1秒以后（setTimeout(function(){......},1000);）才可（根据canTouch变量设置）切换页面

以下是demo的HTML代码部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=640, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>H5-test</title>
<link href="css.css" rel="stylesheet" />
</head>
 
<body>
 
<div class="page_box">
    <div class="page page1">
        <div>
            <div>11111111111</div>
            <div>11111111111</div>
            <div>11111111111</div>
            <div>11111111111</div>
            <div>11111111111</div>
            <div>11111111111</div>
            <div>11111111111</div>
            <div>11111111111</div>
            <div>11111111111</div>
            <div>11111111111</div>
        </div>
    </div>
    
    <div class="page page2 hide">
        <div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
        </div>
    </div>
    
    <div class="page page3 hide">
        <div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
        </div>
    </div>
    
    <div class="page page4 hide">
        <div>
            <div>44444444444</div>
            <div>44444444444</div>
            <div>44444444444</div>
            <div>44444444444</div>
            <div>44444444444</div>
            <div>44444444444</div>
            <div>44444444444</div>
            <div>44444444444</div>
            <div>44444444444</div>
            <div>44444444444</div>
        </div>
    </div>
    
    <div class="page page5 hide">
        <div>
            <div>55555555555</div>
            <div>55555555555</div>
            <div>55555555555</div>
            <div>55555555555</div>
            <div>55555555555</div>
            <div>55555555555</div>
            <div>55555555555</div>
            <div>55555555555</div>
            <div>55555555555</div>
            <div>55555555555</div>
        </div>
    </div>
    
    <div class="page page6 hide">
        <div>
            <div>66666666666</div>
            <div>66666666666</div>
            <div>66666666666</div>
            <div>66666666666</div>
            <div>66666666666</div>
            <div>66666666666</div>
            <div>66666666666</div>
            <div>66666666666</div>
            <div>66666666666</div>
            <div>66666666666</div>
        </div>
    </div>
</div>
 
<div class="arrow">∧</div>
 
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
 
//$('.page').height($(window).height());
 
document.addEventListener("touchmove", function(e){
    e.preventDefault();
} , false);
 
var curPage = 1;
var PageL = $('.page_box .page').length;
var canTouch = false;
canTouch = true;
 
var startY , endY , diff;
document.body.addEventListener("touchstart", touchStart, false);
document.body.addEventListener("touchmove", touchMove, false);
document.body.addEventListener("touchend", touchEnd, false);
function touchStart(e){
    var touch = e.touches[0];
    startY = touch.pageY;
}  
function touchMove(e){
    //e.preventDefault();
    var touch = e.touches[0];
    endY = touch.pageY;
    diff = endY - startY;
}
function touchEnd(e){
    if(Math.abs(diff) > 150 && canTouch){
        if(diff > 0){
            if(curPage <= 1){
                return;
            }
            
            $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outDown');
            curPage--;
            $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inDown');
            
        }else{
            if(curPage >= PageL){
                return;
            }
            
            $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outTop');
            curPage++;
            $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inTop');
            
            if(curPage >= PageL){
                $('.arrow').hide();
            }else{
                $('.arrow').show();
            }
        }
        canTouch = false;
        setTimeout(function(){
            canTouch = true;
            diff = 0;
            $('.page' + (curPage - 1) + ', .page' + (curPage + 1)).addClass('hide');
        },1000);
    }
}
</script>
</body>
</html>

 

以下是demo的CSS样式部分

@charset "utf-8";
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:50px; line-height:1.5em; color:#212121;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none; touch-callout:none;
}
html , body , .page_box{ width:100%; height:100%; position:relative; overflow:hidden;}
.page{ background:url(data:image/jpg;base64,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) repeat-y; background-size:100%;}
.page{ display:flex; justify-content:center; align-items:center; width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden;}
.page.hide{ display:none;}
 
/*==================================*/
 
.page.inTop{
            -webkit-animation:ShowTop .5s ease-out both;
                    animation:ShowTop .5s ease-out both;
}
.page.outTop{
            -webkit-animation:HideTop .5s ease-out both;
                    animation:HideTop .5s ease-out both;
}
.page.inDown{
            -webkit-animation:ShowDown .5s ease-out both;
                    animation:ShowDown .5s ease-out both;
}
.page.outDown{
            -webkit-animation:HideDown .5s ease-out both;
                    animation:HideDown .5s ease-out both;
}
@-webkit-keyframes ShowTop{
    0%{ -webkit-transform:translateY(100%);}
    100%{ -webkit-transform:translateY(0);}
}
@keyframes ShowTop{
    0%{ transform:translateY(100%);}
    100%{ transform:translateY(0);}
}
@-webkit-keyframes HideTop{
    0%{ -webkit-transform:translateY(0);}
    100%{ -webkit-transform:translateY(-100%);}
}
@keyframes HideTop{
    0%{ transform:translateY(0);}
    100%{ transform:translateY(-100%);}
}
@-webkit-keyframes ShowDown{
    0%{ -webkit-transform:translateY(-100%);}
    100%{ -webkit-transform:translateY(0);}
}
@keyframes ShowDown{
    0%{ transform:translateY(-100%);}
    100%{ transform:translateY(0);}
}
@-webkit-keyframes HideDown{
    0%{ -webkit-transform:translateY(0);}
    100%{ -webkit-transform:translateY(100%);}
}
@keyframes HideDown{
    0%{ transform:translateY(0);}
    100%{ transform:translateY(100%);}
}
 
/*==================================*/
 
.arrow{ width:70px; height:56px; line-height:56px; text-align:center; font-size:50px; font-weight:bold; color:#d00; position:absolute; left:285px; bottom:10px;
            -webkit-animation:arrow 1.2s .5s ease-in-out infinite;
                    animation:arrow 1.2s .5s ease-in-out infinite;
}
@-webkit-keyframes arrow{
    0%{ -webkit-transform:translateY(0); opacity:1;}
    100%{ -webkit-transform:translateY(-50%); opacity:0}
}
@keyframes arrow{
    0%{ transform:translateY(0); opacity:1;}
    100%{ transform:translateY(-50%); opacity:0}
}
 
 
/*==================================*/
 
.page > div > div:nth-child(1){
    -webkit-animation:fadeRightTan .8s .2s ease-in-out both;
            animation:fadeRightTan .8s .2s ease-in-out both;
}
.page > div > div:nth-child(2){
    -webkit-animation:fadeRightTan .8s .7s ease-in-out both;
            animation:fadeRightTan .8s .7s ease-in-out both;
}
.page > div > div:nth-child(3){
    -webkit-animation:fadeRightTan .8s 1.2s ease-in-out both;
            animation:fadeRightTan .8s 1.2s ease-in-out both;
}
.page > div > div:nth-child(4){
    -webkit-animation:fadeRightTan .8s 1.7s ease-in-out both;
            animation:fadeRightTan .8s 1.7s ease-in-out both;
}
.page > div > div:nth-child(5){
    -webkit-animation:fadeRightTan .8s 2.2s ease-in-out both;
            animation:fadeRightTan .8s 2.2s ease-in-out both;
}
.page > div > div:nth-child(6){
    -webkit-animation:fadeRightTan .8s 2.7s ease-in-out both;
            animation:fadeRightTan .8s 2.7s ease-in-out both;
}
.page > div > div:nth-child(7){
    -webkit-animation:fadeRightTan .8s 3.2s ease-in-out both;
            animation:fadeRightTan .8s 3.2s ease-in-out both;
}
.page > div > div:nth-child(8){
    -webkit-animation:fadeRightTan .8s 4.7s ease-in-out both;
            animation:fadeRightTan .8s 4.7s ease-in-out both;
}
.page > div > div:nth-child(9){
    -webkit-animation:fadeRightTan .8s 5.2s ease-in-out both;
            animation:fadeRightTan .8s 5.2s ease-in-out both;
}
.page > div > div:nth-child(10){
    -webkit-animation:fadeRightTan .8s 5.7s ease-in-out both;
            animation:fadeRightTan .8s 5.7s ease-in-out both;
}
@-webkit-keyframes fadeRightTan{
    0%{ -webkit-transform:translateX(100%); opacity:0;}
    70%{ -webkit-transform:translateX(-5%); opacity:1;}
    80%{ -webkit-transform:translateX(2%); opacity:1;}
    90%{ -webkit-transform:translateX(-2%); opacity:1;}
    100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeRightTan{
    0%{ transform:translateX(100%); opacity:0;}
    70%{ transform:translateX(-5%); opacity:1;}
    80%{ transform:translateX(2%); opacity:1;}
    90%{ transform:translateX(-2%); opacity:1;}
    100%{ transform:translateX(0); opacity:1;}
}
--------------------- 
版权声明：本文为CSDN博主「羽筠」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_16494241/article/details/78095575

 

亲试有效，感谢博主，转载一下

鲤鱼和龙虾
关注
专栏目录
纯js实现移动端H5上下翻页
qq_42894622的博客
05-25 3581
H5-test /*==================================*/ .page.inTop{ -webkit-animation:ShowTop .5s ease-out both; animation:ShowTop .5s ease-out both; } .page.outTop{ -webkit-animation:HideTop .5s...
HTML5实现的手机上下滑动翻页特效源码
04-12
这款“HTML5实现的手机上下滑动翻页特效源码”是专为移动设备设计的，旨在提供流畅、自然的触屏滑动效果，使得用户在浏览网页内容时能有类似翻书的体验。下面我们将深入探讨这一技术实现的关键知识点。 首先，HTML5...
移动端H5上下滑屏翻页demo
03-27
移动端H5上下滑屏翻页demo，本人已做优化，直接在分页内添加内容，就可以看到每页翻页的内容，自适应屏幕大小，直接可上项目
移动端页面上下滑动，大小、透明度的变化视觉差异效果切换页面
羽筠的博客
09-25 9230
移动端页面上下滑动，大小、透明度的变化视觉差异效果切换页面 上滑动进入下一页 ， 当前页从 scale=1 放大至 比1的大倍数 ，并且透明度降低至0 ，下一页从 scale=0.1 放大至 scale=1 , 透明度无变化 下滑动进入前一页 ， 当前页从 scale=1 缩小至 scale=0.1 ，透明度无变化     ，下一页从 比1的大倍数 缩小至 scale=1 , 透明度从0至1的
HTML5移动端页面开发实战
最新发布
weixin_34392511的博客
09-21 1227
本文还有配套的精品资源，点击获取 简介：HTML5为适应包括手机在内的各种移动设备提供了网页开发的标准功能。通过 viewport 元标签属性实现自适应布局，使用CSS3对图片进行等比例缩放，并通过媒体查询提供响应式设计。利用HTML5语义化元素和CSS3技术优化移动用户体验，同时采用 <picture> 和 srcset ...
H5页面，上下滑动翻页（整页翻书切换效果）
羽筠的博客
09-07 3096
页面间的切换：整页翻书的切换效果。
h5上下翻页动画
03-07
h5年报是一个上下翻页的动画，并伴有音乐，翻页后的动后是一帧一帧地加载。
移动端H5页面左右滑动并加载分页 dropload+swiper
04-19
总之，“dropload+swiper”的组合为移动端H5页面提供了高效、流畅的左右滑动加载分页效果，是构建商品类目展示页面的理想选择。通过熟练掌握这两个插件，开发者可以快速构建出符合用户习惯的交互界面，提升产品整体...
移动端手指上下滑动切换插件pageSlider
07-11
插件描述：PageSlider 是一个基于zepto.js用于实现H5单页面跟随手指上下滑动切换的组件，支持通过transform3D启动GPU加速，目前仅支持移动端touch设备。演示地址：http://www.jq22.com/jquery-info8395
H5 上下 翻页
11-27
H5 滑动 翻页
h5滑动上拉翻页，下拉刷新
09-26
h5滑动上拉翻页，下拉刷新，绝对好用，
H5满屏翻页效果
05-12
H5满屏翻页效果
HTML5手机专题页面触屏滑动上下翻页特效
09-09
HTML5手机专题页面触屏滑动上下翻页特效
h5_pageSlider滑动翻页demo
08-16
依赖zepto的移动端H5滑动翻页，支持多种功能设置。pageSlider有需要的朋友可以试试，很简单集成。
移动端H5开发 Turn.js实现很棒的翻书效果
10-22
主要为大家详细介绍了Turn.js实现很棒的翻书效果，对Turn.js翻书效果的实现进行总结，感兴趣的小伙伴们可以参考一下
H5上滑分页
weixin_43700984的博客
02-04 335
下面展示一些 内联代码片。 $(function() { h5Js.load(); }); var isLoading=false; var isEnd=false; var curentPage=1; window.onscroll = function() { if (isLoading || isEnd) { return; } var scrollTop = document.body.scrollTop + document.doc
H5 -移动端翻页效果
weixin_44624120的博客
04-27 889
完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
php分页滑动,移动端web滚动分页的实现方法
weixin_30962449的博客
03-29 314
本文实例为大家分享了移动端web滚动分页展示的具体代码，供大家参考，具体内容如下方法一：前端代码：var page = 2; //当前页的页码var flagNoData = false; //falsevar allpage = @Model.PageCount; //总页码，会从后台获取function showAjax(currentIndex) {$.ajax({url: "@Url.Ac...
jquery移动端h5页面开发
11-19
在jQuery移动端H5页面开发中，我们可以使用以下技巧和方法： 1. 使用viewport设置移动端页面的宽度和缩放比例，例如： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 2. 使用CSS3媒体查询来适配不同的屏幕尺寸，例如： ```css @media screen and (max-width: 768px) { /* 在屏幕宽度小于等于768px时应用的样式 */ } ``` 3. 使用jQuery Mobile框架来快速构建移动端页面，例如： ```html <!-- 引入jQuery Mobile库 --> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <!-- 使用jQuery Mobile组件 --> <div data-role="page"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>Content</p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> ``` 4. 使用touch事件来处理移动端的触摸事件，例如： ```javascript $(document).on("touchstart", function(event) { // 处理touchstart事件 }); $(document).on("touchmove", function(event) { // 处理touchmove事件 }); $(document).on("touchend", function(event) { // 处理touchend事件 }); ``` 5. 使用CSS3动画来实现移动端页面的动态效果，例如： ```css @keyframes myanimation { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } .myelement { animation: myanimation 1s ease-in-out infinite; } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值