zoukankan      html  css  js  c++  java
  • 基于HTML5手机上下滑动翻页特效

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

    html代码:

    <section class="u-alert">
            <img style="display:none;" src="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="images/load.gif" alt="loading">
        </section>

    源码下载

  • 相关阅读:
    浅谈 iOS 事件的传递和响应过程
    iOS 之渐变颜色
    系统enum的一些样式
    Storyboard操作的2个小技巧
    iOS 动画初步
    iOS之Runtime初应用
    Block使有注意点
    使用ios系统自带分享
    IOS原生地图与高德地图
    反向传值实例
  • 原文地址:https://www.cnblogs.com/sprine/p/4692214.html
Copyright © 2011-2022 走看看