HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：
1、html5页面代码
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/htmlcharset=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: 920pxbackground-image: url(hamer_files/1.jpg)background-size: coverbackground-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: coverbackground-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: coverbackground-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: coverbackground-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: coverbackground-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: coverbackground-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: coverbackground-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: coverbackground-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 1emfont-size:1.8empadding:15pxbackground:#FFF}
.ad_foot li a {display:block}
.ad_foot li .l {width:75pxheight:75pxfloat:leftoverflow:hidden}
.ad_foot li .l img {width:75pxwidth:75px}
.ad_foot li .r {width:78%float:leftmargin-left:30pxcolor:#666overflow:hidden}
.ad_foot li .r p {color:#999font-size:1.2em}
.ad_foot li .r span {font-size:0.8em}
.ad_foot li .r i {font-style:normal}
.lazy-img, .lazy-finish{background-color:#f0eded}
.page-list{font-size:20pxfont-family: "Microsoft yahei"padding-left:17pxpadding-top:30pxheight:35pxborder-bottom:1px solid #b5b5b5display:none}
.ad_foot{padding:15px 15px 0 15px}
/*声音播放按钮*/
#song_img {width:293pxheight:41pxdisplay:blockposition:absoluteright:4.1emtop:1.6emfont-size:1.7emtext-align:centerline-height:41pxcolor:#FFFbackground:url(../img/music_c3.png) no-repeat 0 0}
/*底部推荐*/
.ad_list{margin-top:2em}.ad_list li {width:46%background:nonepadding:0float:leftmargin-bottom: 1em}
.ad_list li.r {float:right}.ad_list li a img {width:100%height:auto}
.ad_foot h3 {width:100%height:48pxline-height:48pxbackground:#F9F5EC}
.ad_foot h3 a {display:inline-blockcolor:#444width:50%text-align:centerfont-size:1.5emheight:48pxborder-bottom:2px solid #FF9240}
.ad_foot h3 a.active {color:#FFFbackground:#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:75pxheight: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、运行效果如下：
特征（feature)1、1：1触控运动
Swiper默认提供1:1的触控距离，当然，这个比率是可以设置的。（touchRatio）
2、触控模仿
这个功能对于开发桌面网站会很有用。简单来说，就是因为Swiper能够让鼠标事件表现得像触屏事件（点击以及拖曳滑块）
3、水平/垂直
Swiper运动主要有两种模式，horizontal(水平滑动)以及vertical（垂直运动的滑动）
4、自由模式（Free Mode）
这种模式下能够让slides 无需定位，就像通常的滑动条。（看下面的例子）
5、旋转调整 （rotation/resize）
Swiper 在移动设备旋转后能自适应尺寸。
6、响应式
能使用百分比的宽高定义slides,为移动端提供不同的解决方案。
7、滑动阻止
简单来说，就是，只能使用一种模式，水平或者垂直滑动。
8、抵抗反d（resistant bounds）
Swiper能够提供一种机制，就是当滑动滑块超过最左以及最右（最上或最下）的位置时触发的一种抵御机制。
9、原生要素（native momentum）
有不少的原生东西提供给Swiper。
10、内建分页控制
Swiper能够快速生成内建的分页控制（pagination）,指定html 某一标签为pagination，Swiper就能做很多东西了。
11、自动播放
只用设置延迟时间，Swiper就会自动地轮播slides直到你触碰该滑块（touch）为止。
12、循环模式（Loop mode）
该种模式下，你能够无限滑动滑块，到最后一个之后会跳转回第一个。
13、旋转模式（Carousel mode）
Swiper 能够让你在slides父容器下设置你所需要展示的slides数量。
14、滑动容器
在该特征下能够使用Swiper在一些简单的能滑动的区域里，没有slides。在Apps里十分有用。
15、嵌套Swipers
能够将Swipers嵌套入各种不同的Swiper 的slide里，例如垂直的或水平的。
16、任意的HTML 标签
可以将任一的HTML 内容放到slide里，不止仅限于图像。
17、硬件加速
swiper 使用硬件加速技术（如果该移动设备支持的话）能够得到良好流畅的动画效果以及优美的外观，尤其是在IOS设备里。
18、丰富的API
Swiper拥有丰富的API接口。（不过关于中文文档似乎不多，没找着。）能够让开发者生成个人独有的分页器（pagination），上下滑块的按钮以及4个回调函数：onTouchStart,onTouchMove,onTouchEnd,onSlideSwitch。
19、灵活的配置
Swiper在初始化的时候能够接受多个参数以便让其尽可能的灵活。能够配置动画的速度（speed），模式（mode水平抑或垂直的），以及自由模式（free mode）...以及其他..
20、插件API（Plugins API）
Swiper从1.7版本开始就变得强大起来了，因为有更多而简单的插件API允许开发者创造属于自己的Swiper 插件或通过Swiper的核心创制hooks(挂钩)（该官网处提供了几款优秀的插件Swiper smooth progress, Swiper hash navigation,swiper scrollbar）
21、良好的兼容性
Swiper通用性的测试环境：移动端的Safari（iOS5下），Android 2.1+，windows Phone 8,以及最新版本的谷歌浏览器（Chrome），Safari，Firefox，IE10 以及欧朋浏览器（Opera）
22、老版本IE的兼容
Swiper 2.x 开始，通过DOM动画，而非css transitions 兼容IE7 以上（需要包含jQuery），因为IE7不支持css3 transitions....简单来说，支持IE7 以上版本。
23、独立性
Swiper不依赖像jQuery那样的js类库，因此能够让Swiper更加的小型以及快速。所以Swiper能够很安全地应用诸如jQuery、jQuery Mobile，jQTouch等等其他的js类库。
24、超轻量级
压缩后仅仅10KB左右。
以上，就是Swiper能够做的，应用以上特征就使用原生属性方法能够快速生成令人惊叹的触控接口以及apps。
Usage:
1、创建两个html文件，一个test一个test2。
2、打开test页面，在里面创建一个div，并给其添加onmousedown与move方法。
3、打开后我们发现是一个棕绿的页面。
4、定义两个变量，startx为鼠标按下的坐标，endx为鼠标移动的坐标。
5、实现鼠标点击执行的down方法，在里面通过clientX获得鼠标按下坐标，并赋值给startx。
6、接着在实现鼠标移动的move方法，获得鼠标移动的坐标，并通过startx与endx相减判断是否向左边滑动大于30的距离，是的话就切换到test2页面。
7、现在我们打开test页面，向左滑动会提示切换页面（这个可以去除），确定后就切换到了test2页面，向右滑动切换的方法同理。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）