基于HTML5手机上下滑动翻页特效。这是一款手机移动端触屏滑动翻页代码下载。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

  <section class="u-alert">

        <img style="display:none;" src="data:images/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" style="height: 907px;">

        <div class="translate-back" style="height: 907px;">

            <div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height:70%;">

                <div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/1.jpg); background-size: cover; height: 909px; background-position: 50% 50%;"></div>

            </div>

            <div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height:70%;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/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:70%;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/8.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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/9.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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/10.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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/11.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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/12.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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/13.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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/14.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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/15.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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/16.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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/17.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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/18.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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/19.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: 907px;">

                <div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/20.jpg); background-size: cover; background-position: 50% 50%;"></div>

            </div>

        </div>

    </section>

    <section class="u-pageLoading">

        <img src="data:images/load.gif" alt="loading">

    </section>

via：http://www.w2bc.com/Article/40662

基于HTML5手机上下滑动翻页特效的更多相关文章

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

    18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...

  2. 转载 vue-awesome-swiper - 基于vue实现h5滑动翻页效果

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...

  3. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  4. Android学习笔记之滑动翻页（屏幕切换）

    如何实现手机上手动滑动翻页效果呢?呵呵,在这里我们就给你们介绍一下吧. 一般实现这个特效会用到一个控件:ViewFlipper <1>View切换的控件—ViewFlipper 这个控件是 ...

  5. 【解决ViewPager在大屏上滑动不流畅】 设置ViewPager滑动翻页距离

    在项目中做了一个ViewPager+Fragment滑动翻页的效果,在模拟器和小米手机上测试也比较正常.但是换到4.7以上屏幕测试的时候发现老是滑动失效. 因为系统默认的滑动策略是当用户滑动超过半屏之 ...

  6. Android中实现滑动翻页—使用ViewFlipper(dp和px之间进行转换)

    Android中实现滑动翻页—使用ViewFlipper(dp和px之间进行转换) Android中dp和px之间进行转换 在xml布局文件中,我们既可以设置px,也可以设置dp(或者dip).一般情 ...

  7. 微信里经常看到的滑动翻页效果，slide

    上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大 ...

  8. 移动端ios上下滑动翻页事件失效

    移动端开发过程中,在添加上下滑动事件时候,引入了最常用的移动端库zepto.js及其touch模块,有一种现象,安卓的手机没有问题,上下滑动翻页很正常 :但是到了ios上面,好啊,上下滑动会出现弹性滚 ...

  9. 开源 侧滑 和 Tab滑动翻页 控件

    侧滑 https://github.com/jfeinstein10/SlidingMenu Tab滑动翻页 https://github.com/astuetz/PagerSlidingTabStr ...

随机推荐

  1. 构建高性能web之路------mysql读写分离实战(转)

    一个完整的mysql读写分离环境包括以下几个部分: 应用程序client database proxy database集群 在本次实战中,应用程序client基于c3p0连接后端的database ...

  2. 【Servlet】java web 文件下载功能实现

    需求:实现一个具有文件下载功能的网页,主要下载压缩包和图片 两种实现方法: 一:通过超链接实现下载 在HTML网页中,通过超链接链接到要下载的文件的地址 <!DOCTYPE html> & ...

  3. 【java】解析java中的数组

    目录结构: contents structure [+] 一维数组 1,什么是一维数组 2,声明一维数组的三种方式 二维数组 1,什么是二维数组 2,声明二维数组的3种方式 3,二维数组的遍历示例 数 ...

  4. Linux中iptables防火墙指定端口范围

    我需要700至800之间的端口都能tcp访问 代码如下 复制代码 -A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 7 ...

  5. Vue style 深度作用选择器 >>> 与 /deep/（sass/less）

    传送门:https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html 你很可能会遇到的问题 vue组件编译后,会将 template ...

  6. A标签实现文件下载功能

    <a>可直接下载xls,doc,rar,zip,exe,js文件(图片跟txt文件是直接打开的) <a href="wKioJlJolKeCIzkCADd3Wf7OPI42 ...

  7. Centos 7搭建Gitlab服务器超详细(转)

    一. 安装并配置必要的依赖关系 在CentOS系统上安装所需的依赖:ssh,防火墙,postfix(用于邮件通知) ,wget,以下这些命令也会打开系统防火墙中的HTTP和SSH端口访问. 1.安装s ...

  8. 中控考勤机SDK使用中员工姓名的处理（ c# ）

    公司使用的考勤机是中控的指纹考勤机,但是中控的型号乱七八糟,通过程序读出来的型号和实际标的型号不一致. 另外,提供的开发包的C#版本的Demo中调用 axCZKEM1.ReadAllUserID(iM ...

  9. PHP实现无符号右移（js中的 >>>）

    移位包括有符号左移(<<).有符号右移(>>).无符号右移(>>>),其中 js 支持三种移位,PHP只支持前两种移位(没查到第三种),恰好需要PHP进行无符 ...

  10. unity, Gizmos.DrawMesh一个坑

    错误写法(画不出来): void OnDrawGizmos(){ Mesh mesh=new Mesh(); mesh.vertices=... mesh.triangles=... //mesh.R ...