基于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. 安装cacti

    操作介绍如下: http://foreveryan.blog.51cto.com/3508502/775558 安装如下: 英文地址:http://www.cyberciti.biz/faq/fedo ...

  2. MySQL -- 外键创建失败

    使用show engine innodb status\G 查看数据库状态的时候,发现以下报错信息: ------------------------ LATEST FOREIGN KEY ERROR ...

  3. C#基础课程之四集合（ArrayList、List<泛型>）

    list泛型的使用 ArrayList list = new ArrayList(); ArrayList list = ); //可变数组 list.Add("我"); //Ad ...

  4. springboot 错误处理

    在 java web开发过程中,难免会有一些系统异常或人为产生一些异常.在 RESTful springboot 项目中如何优雅的处理? 分析:在RESTful 风格的springboot 项目中,返 ...

  5. Zookeeper服务器配置项详解

    文章转自: http://www.bug315.com/article/159.htm http://www.bug315.com/article/160.htm Zookeeper是通过一个***. ...

  6. CentOS 7 安装以及配置

    http://blog.csdn.net/qzc295919009/article/details/42708653

  7. MySql（十二）：MySql架构设计——可扩展设计的基本原则

    一.前言 科技在发展,硬件设备的发展渐渐无法满足应用系统对处理能力的要求.不过,我们还是可以通过改造系统的架构体系,提升系统的扩展能力,通过组合多个低处理能力的硬件设备来达到一个高处理能力的系统,也就 ...

  8. Django在Win7下安装与创建项目hello word示例

    Django在Win7下的安装及创建项目hello word的例子 有关python 的django 框架安装与开发的小例子.Django在Win7下的安装及创建项目hello word.1.安装:命 ...

  9. Shiro系列(3) - What is shiro?

    什么是shiro? Shiro是apache的一个开源权限管理的框架,它实现用户身份认证,权限授权.加密.会话管理等功能,组成了一个通用的安全认证框架 使用shiro来实现权限管理,可以非常有效的提高 ...

  10. Mac终端中主机名与用户名的修改

    Mac终端的主机名称+用户名全部显示出来的话会可能显得特别长,影响整体美观,可以切换至root用户后 修改.bashrc文件进行格式化. 1. 终端中切换root用户 su - root 2. 修改/ ...