<!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;
            width: 100%;
            height: 100%;
        }
        #screen2{
            display: none;
            position: absolute;
            background-color: pink;
            width: 100%;
            height: 100%;
        }
        #screen3{
            display: none;
            position: absolute;
            background-color: #00f;
            width: 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>

bootstrap 上下页滚动的更多相关文章

  1. One Page Scroll – 实现苹果风格的单页滚动效果

    单页滚动网站已经被广泛使用了有一段时间了,它们对于快速提供信息是很有用的.One Page Scroll 是一个 jQuery 插件,简化了创建此类网站的步骤,只需创建 HTML 结构,进行简单设置, ...

  2. Bootstrap 标签页（Tab）插件

    摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...

  3. 第二百四十五节，Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一．标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  4. 第二百四十节，Bootstrap巨幕页头缩略图和警告框组件

    Bootstrap巨幕页头缩略图和警告框组件 学习要点: 1.巨幕组件 2.页头组件 3.缩略图组件 4.警告框组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:巨幕组件.页头组件.缩 ...

  5. bootstrap 翻页的状态

    翻页的状态 下面的实例演示了上表中所讨论的 class .disabled 的用法: <!DOCTYPE html><html><head><meta htt ...

  6. bootstrap 翻页(对齐的链接)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. Laya List翻页滚动方案 & List滚动源码解析

    Laya List翻页滚动方案 & List滚动源码解析 @author ixenos 2019-03-29 1.List翻页滚动方案 /** * 计算下一页的起始索引, 不足时补足 * @p ...

  8. bootstrap课程12 滚动监听如何实现（bootstrap方式和自定义方式）

    bootstrap课程12 滚动监听如何实现(bootstrap方式和自定义方式) 一.总结 一句话总结:通过监听滚动的高,判断滚动的高是否大于元素距离顶端的距离 1.如何知道屏幕滚动的高? st=$ ...

  9. Bootstrap 标签页和工具提示插件

    一．标签页 标签页也就是通常所说的选项卡功能. //基本用法 <ul class="nav nav-tabs"> <li class="active&q ...

随机推荐

  1. mysql的unsigned属性负值报错和为0情况及mysql的严格模式

    最近发现在进行线程操作时,发现数据库的unsigned字段减为负数时并未报错而是变为0,因此去寻找解决方案,发现这和我的sql_mode有关. sql_mode MySQL服务器可以以不同的SQL模式 ...

  2. ping加上时间信息

    一.linux系统ping加时间戳信息 1.ping 加时间信息,然后还要实时保存到一个文件中,那么就与awk结合 ping 115.239.211.112 -c 10 | awk '{ print ...

  3. 解压gz文件有误

    tar: This does not look like a tar archive tar: Skipping to next header tar: Exiting with failure st ...

  4. win服务器 解决apache 80端口被占用问题

    是系统的服务占用了80端口,所以要么结束系统服务,要么修改apache端口. PID4的服务是World Wide Web Publishing Service 这里选择结束这个系统服务,运行serv ...

  5. elk架构

    (1)Kafka:接收用户日志的消息队列.(2)Logstash:做日志解析,统一成JSON输出给Elasticsearch.(3)Elasticsearch:实时日志分析服务的核心技术,一个sche ...

  6. nginx 缓存区太小导致后台Connection reset by peer 报错

    问题概述:图片bit 64生成数据流太大,导致小程序分享弹窗的二维码图片生成失败 后台报错: 排查: Client------>nginx------->h5------>nginx ...

  7. MATLAB中.m文件生成.dll

    1.配置编译环境 在命令行窗口输入: mbuild -setup 如果出现以下提示信息说明成功: 如果提示信息为: 错误使用mbuild(line 164) Unable to complete su ...

  8. Java并发包--LinkedBlockQueue

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3503458.html LinkedBlockingQueue介绍 LinkedBlockingQueue ...

  9. C语言——for循环和while循环的效率区别——类似哨兵思想

    int ID_Conv_Sentinel(int u16device_cfg_num) { int i8id; int size=0; int i=0; size = sizeof(Device_ID ...

  10. 项目：jSon和Ajax登录功能

    组件化网页开发 / 步骤二 · 项目:jSon和Ajax登录功能 要熟练编写封装的$.ajax({........})