zoukankan      html  css  js  c++  java
  • bootstrap 上下页滚动

      

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery.touchSwipe.min.js"></script>
    <style>
    #screen1{
    background-color: #ddd;
    display: block;
    position: absolute;
    100%;
    height: 100%;
    }
    #screen2{
    display: none;
    position: absolute;
    background-color: pink;
    100%;
    height: 100%;
    }
    #screen3{
    display: none;
    position: absolute;
    background-color: #00f;
    100%;
    height: 100%;
    }
    </style>
    </head>
    <body id="orientation">
    <div class="screen1" id="screen1" >

    </div>
    <div class="screen2" id="screen2">

    </div>
    <div class="screen3" id="screen3" >

    </div>
    <script>
    $(function () {
    function switcher(id, nextid, xiaid) {
    $(id).swipe({
    swipe: function (event, direction, distance, duration, fingerCount) {
    if (direction == "up") {
    $(nextid).show();
    $(this).hide();
    }
    else if (direction == "down") {
    $(xiaid).show();
    $(this).hide();
    }
    }
    }
    );
    }
    $("#screen1").swipe({
    swipe: function (event, direction, distance, duration, fingerCount) {
    if (direction == "up") {
    $("#screen2").show();
    $("#screen1").hide();
    }
    }
    }
    )
    switcher("#screen2", "#screen3", "#screen1");
    $("#screen3").swipe({
    swipe: function (event, direction, distance, duration, fingerCount) {
    if (direction == "down") {
    $("#screen3").hide();
    $("#screen2").show();
    }
    }
    }
    );
    });
    </script>
    </body>
    </html>
    <script>
    var c = "http://oss.tunji99.com/tunji-dev/20191107/14d11fa494a947539606aa9b94ddf818.png!q_max3,http://oss.tunji99.com/tunji-dev/20191107/14d11fa494a947539606aa9b94ddf818.png!q_max3,";
    var e = c.search("http://oss.tunji99.com/tunji-dev/20191107/14d11fa494a947539606aa9b94ddf818.png!q_max3,","");
    console.log(e);
    </script>
  • 相关阅读:
    Warning: 执行完毕, 但带有警告 trigger trigger_EqPic_insert 已编译。
    c#生成cad缩略图或者图片
    ORACLE ROWNUM解析[转]
    集合已修改;可能无法执行枚举操作。
    JS 变量是否有值的判断
    简单方法解决bootstrap3 modal异步加载只一次的问题
    System.Data.DbType映射关系
    sql zhuan ORACLE
    Enterprise Library
    sql server转oracle需要注意的几点
  • 原文地址:https://www.cnblogs.com/shangjun6/p/11846256.html
Copyright © 2011-2022 走看看