<!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. leetcode-100. Same Tree · Tree + DFS + Queue

    题面 对比两棵二叉树是否相同,返回结果. 思路 1. 递归解决DFS 首先判断根节点,如果都空,返回true: 如果一空一不空,返回false: 如果都不空,判断两节点值是否相同,若不同,返回fals ...

  2. 浅析Java中的集合

    先了解一下集合与数组的区别:数组是java中存储基本数据类型.引用类型的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合只能存储引用类型的数据,长度可变,可在多数情况下使用. 集 ...

  3. deep_learning_Github_初学者教程

    Github_link_from:https://github.com/lawlite19/MachineLearning_Python 机器学习算法Python实现 目录 机器学习算法Python实 ...

  4. linux 基础12-程序与资源管理

    1. 基础概念 可执行的二进制文件就是程序 执行程序的时候因触发事件而获取的ID,称为PID 在登入并执行bash时,系统依据登录者的UID/GID给登录者一个PID/GPID/SID等 启动程序时, ...

  5. 3.Vue过滤器

    1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾 ...

  6. 关于阿里云OSS上传图片之后会被旋转90度的解决办法

    原文:https://www.cnblogs.com/wuhjbk/p/10133596.html 问题描述:正常的图片前端上传到oss成功之后的资源地址.在html上引用的时候被旋转了90度oss资 ...

  7. 深度解析Graph Embedding

    Graph Embedding是推荐系统.计算广告领域最近非常流行的做法,是从word2vec等一路发展而来的Embedding技术的最新延伸:并且已经有很多大厂将Graph Embedding应用于 ...

  8. NoClassDefFoundError: org/springframework/boot/bind/RelaxedDataBinder

    今天启动springboot的时候发现一个类不能注入RelaxedDataBinder,发现是没有相应的jar包,原因是在版本2.x之后删除了包.所以只要在之后的引用版本中换成2.x之后即可. 查看p ...

  9. JDK源码那些事儿之常用的ArrayList

    前面已经讲解集合中的HashMap并且也对其中使用的红黑树结构做了对应的说明,这次就来看下简单一些的另一个集合类,也是日常经常使用到的ArrayList,整体来说,算是比较好理解的集合了,一起来看下 ...

  10. 今天把自己的ocr镜像开源了

    docker pull docker.io/zhangbo2008/ocr_docker_byzhang:v1 即可,欢迎下载