html5上下滑动“翻页”实现，是真正的翻页

Posted 2023-03-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5上下滑动“翻页”实现，是真正的翻页相关的知识，希望对你有一定的参考价值。

1、不是那种一个网页代码里有10张图片，然后翻一页一张图片，再翻页又是另一张图片
2、我说的一页是有许多信息的那种，文字、图片、背景图片，而且是动态生成的
3、就像下面的网页一样

大概给我指点一下就好，如果能细说就更好了！谢谢

html5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：

1、html5页面代码

<!DOCTYPE html>

<title>HTML5手机页面触屏滑动上下翻页特效</title>

</head>

</div>

</div>

</section>

</section>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</section>

</body></html>

2、css代码：

@charset "utf-8";

.ad_foot li margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;

.ad_foot li a display:block;

.ad_foot li .l width:75px; height:75px; float:left; overflow:hidden;

.ad_foot li .l img width:75px; width:75px;

.ad_foot li .r width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;

.ad_foot li .r p color:#999; font-size:1.2em;

.ad_foot li .r span font-size:0.8em;

.ad_foot li .r i font-style:normal;

.lazy-img, .lazy-finishbackground-color:#f0eded;

.page-listfont-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;

.ad_footpadding:15px 15px 0 15px;

/*声音播放按钮*/

#song_img width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;

/*底部推荐*/

.ad_listmargin-top:2em;.ad_list li width:46%; background:none; padding:0; float:left;margin-bottom: 1em;

.ad_list li.r float:right;.ad_list li a img width:100%; height:auto;

.ad_foot h3 width:100%; height:48px; line-height:48px; background:#F9F5EC;

.ad_foot h3 a display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;

.ad_foot h3 a.active color:#FFF; background:#FF9240;

.magazine_1 li

width:100%;

margin-bottom: 1em;

font-size: 1.8em;

padding: 15px;

background: #FFF;

.magazine_1 li a display:block;

.magazine_1 li .l width: 75px;

height: 75px;

float: left;

overflow: hidden;

.magazine_1 li .l img width:75px; height:75px;

.magazine_1 li .r width: 78%;

float: left;

margin-left: 30px;

color: #666;

overflow: hidden;

.magazine_1 li .r p

color: #999;

font-size: 1.2em;

.magazine_1 li .r span font-size:0.8em;

.ad_foot li .r i font-style:normal;

3、运行效果如下：

参考技术A HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：
1、html5页面代码
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5手机页面触屏滑动上下翻页特效</title>
<meta charset="utf-8">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="pragram" content="no-cache">
<link rel="stylesheet" type="text/css" href="./hamer_files/main.css">
<link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css">
<script type="text/javascript" src="./hamer_files/offline.js"></script>
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
</head>
<body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none;">
<section class="u-alert">
<img style="display:none;" src="./hamer_files/loading_large.gif">
<div class="alert-loading z-move">
<div class="cycleWrap"> <span class="cycle cycle-1"></span>
<span class="cycle cycle-2"></span><span class="cycle cycle-3"></span><span class="cycle cycle-4"></span>
</div>
<div class="lineWrap"> <span class="line line-1"></span><span class="line line-2"></span><span class="line line-3"></span>
</div>
</div>
</section>
<section class="u-arrow">
<p class="css_sprite01"></p>
</section>
<section class="p-ct transformNode-2d transformNode-3d" style="height: 918px;">
<div class="translate-back" style="height: 918px;">
<div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px;">
<div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920px; background-image: url(hamer_files/1.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/2.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/3.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/4.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/5.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/6.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/7.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/8.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
</div>
</section>
<section class="u-pageLoading">
<img src="./hamer_files/load.gif" alt="loading">
</section>
<script src="./hamer_files/init.mix.js" type="text/javascript" charset="utf-8"></script>
<script src="./hamer_files/coffee.js" type="text/javascript" charset="utf-8"></script>
<script src="./hamer_files/99_main.js" type="text/javascript" charset="utf-8"></script>
</body></html>
2、css代码：
@charset "utf-8";
.ad_foot li margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;
.ad_foot li a display:block;
.ad_foot li .l width:75px; height:75px; float:left; overflow:hidden;
.ad_foot li .l img width:75px; width:75px;
.ad_foot li .r width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;
.ad_foot li .r p color:#999; font-size:1.2em;
.ad_foot li .r span font-size:0.8em;
.ad_foot li .r i font-style:normal;

.lazy-img, .lazy-finishbackground-color:#f0eded;
.page-listfont-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;
.ad_footpadding:15px 15px 0 15px;
/*声音播放按钮*/
#song_img width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;
/*底部推荐*/
.ad_listmargin-top:2em;.ad_list li width:46%; background:none; padding:0; float:left;margin-bottom: 1em;
.ad_list li.r float:right;.ad_list li a img width:100%; height:auto;
.ad_foot h3 width:100%; height:48px; line-height:48px; background:#F9F5EC;
.ad_foot h3 a display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;
.ad_foot h3 a.active color:#FFF; background:#FF9240;
.magazine_1 li
width:100%;
margin-bottom: 1em;
font-size: 1.8em;
padding: 15px;
background: #FFF;
.magazine_1 li a display:block;
.magazine_1 li .l width: 75px;
height: 75px;
float: left;
overflow: hidden;
.magazine_1 li .l img width:75px; height:75px;
.magazine_1 li .r width: 78%;
float: left;
margin-left: 30px;
color: #666;
overflow: hidden;
.magazine_1 li .r p
color: #999;
font-size: 1.2em;
.magazine_1 li .r span font-size:0.8em;
.ad_foot li .r i font-style:normal; 参考技术B 翻页其实就是整页切换效果，不局限于只能放一张图片，想加什么内容都是随意的。

至于动态生成，可以通过ajax简单实现，如果需要非常复杂的数据绑定可以使用一些现成的框架比如framework7。

图片中的效果显示来自易企秀，目前这种效果有个流行的叫法-H5动画，可以用swiper插件制作，swiper中文官网有很多类似的例子可以使用。参考技术C 请问你解决了吗？我也想知道怎么做

web前端课程技术内容之如何做一个简单的手机端页面的翻页

【如何做一个简单的手机端页面的翻页】

第一步：创建移动端页面内 HTML + CSS 【注】可用弹性布局但需要注意的是外层盒子的定位

第二步：思考问题要实现怎样的效果？

手指滑动时触发事件【左右】两个方向

2.点击footer部分的下标实现切换效果

3.点击footer部分的下标实现下标颜色变化

第三步；编写JS代码

添加监听事件

document.addEventListener(‘DOMContentLoaded‘,function(){

创建一个数组用于调用数组属性值或者方便【数值】的更改【注】可以用数组 /对象但对象更方便我们的使用

var postion = {

startX:0,

startY:0,

endX:0,

endY:0,

baseMoveX: window.innerHeight / 3,

index:1

}

获取页面元素比不可少的一个步骤

var tab2 = document.getElementsByClassName(‘tab2‘)[0];//获取到ul 思路：用ul定位来实现页面的切换（ul的宽度设置成 innerWind * 4）

var li2 = document.getElementsByClassName(‘li2‘);//索引值不确定且不写先

var tab3 = document.querySelector(‘#tab3‘);

var li3 = document.querySelectorAll(‘.li3‘);

li3[0].style.color = ‘#58bc58‘;//设置默认的第一个下标的颜色

//封装一个函数用于清空下标的颜色

function delite(){

for(var i = 0;i < li3.length; i++){

li3[i].style.color = ‘‘;

}

手指事件【注】这里的原理和拖拽一抹一样（手指按下和手指移动是时必须给给记录光标位置）

手指移动到位置上时候触发记录鼠标移动坐标

tab2.addEventListener(‘touchstart‘,function(e){

postion.startX = e.touches[0].clientX;

postion.startY = e.touches[0].clientY;

})

手指移动位置胡时候触发记录鼠标移动坐标

tab2.addEventListener(‘touchmove‘,function(en){

postion.endX = en.touches[0].clientX;

postion.endY = en.touches[0].clientY;

move();//当手指滑动时触发函数改变ul的定位

})

手指移开的时候定位

tab2.addEventListener(‘touchend‘,function(vent){

move(true);//手指松开时调用调用函（函数用于判断：滑动的距离是否超过绝对值 1.超过 (滑动到下一页) 2.不超过 (位置定位在当前页)）

})

function move(_end){

var x = postion.startX - postion.endX;

var y = postion.startY - postion.endY;

滑动效果

if(postion.index < li2.length){//第一种情况==========left [用if 判断：索引值是 1-3的时候可以向左滑动改变 ul的定位【注】因为超出会造成用户滑动出现空白页面 ]

if(x > 0){//计算公式：起点位置 - 终点位置 = x; 如果 x > 0 说明滑动的方向是左边

to left

以上是关于html5上下滑动“翻页”实现，是真正的翻页的主要内容，如果未能解决你的问题，请参考以下文章

Android RecyclerView实现横向滑动翻页

基于vue实现上下滑动翻页效果

xamarin android开发怎么实现左，右滑动翻页的效果的

js实现移动端手指左右上下滑动翻页效果

在百度看小说怎么取消左、右滑动,在怎么打开上、下滑动模式

web前端课程技术内容之如何做一个简单的手机端页面的翻页