<!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. ES6对数组的增强

    来看数组的改变,Array.from()可以将类数组对象变为数组: Array.of方法用于将一组值,转化为数组: 寻找数组中是否拥有某项find().findIndex(),里面要放置回调函数: 要 ...

  2. QT 定时器的使用方法

    在界面程序中很容易使用到,定时刷新或者更新什么东西,此时应该使用定时器的功能,定时器是在指定时间触发定时器函数,来达到定时的效果 接下来介绍两种定时器的使用,废话不说直接上代码 代码结构: dialo ...

  3. Linux——CentOS7安装gcc编译器详解 查看内核版本

    [root@localhost ~]# uname -a Linux localhost.localdomain 3.10.0-957.el7.x86_64 #1 SMP Thu Nov 8 23:3 ...

  4. Qemu: User mode emulation and Full system emulation

    转载: https://wiki.edubuntu.org/UbuntuDevelopment/Ports QEMU QEMU is a processor emulator and supports ...

  5. 动态规划1——最长递增子序列、最长公共子序列、最长公共子串（python实现）

    目录 1. 最长递增序列 2. 最长公共子序列 3. 最长公共子串 1. 最长递增序列 给定一个序列,找出其中最长的,严格递增的子序列的长度(不要求连续). 解法一:动态规划 通过一个辅助数组记录每一 ...

  6. 关于MVC设计模式下的Model

    内容1: 1.大多数情况下,会有两个关于Model的文件. 一个称他为Entity Model,他里面的字段一般是与数据库直接交互的,也就是说,Entity里面每一个字段赋予的属性都是对应着数据库来的 ...

  7. matlab安装MinG-w64 C/C++编译器

    matlab 2018b之编译器的安装 安装MinGW C/C++ 编译器

  8. Linux-删除文件空间不释放问题解决

    场景描述: 收到zabbix监控报警,晋中生产机器出现磁盘空间不足报警. 远程到该服务器,排查占员工磁盘空间的原因,发现tomcat日志过多,于是清除3天前的日志. 日志清理后,发现磁盘空间没有释放, ...

  9. angularjs google map

    google map display incorrect To remove the grayness, according to https://angular-ui.github.io/angul ...

  10. 前端知识体系：JavaScript基础-原型和原型链-new一个对象的详细过程，手动实现一个 new操作符

    可以描述 new一个对象的详细过程,手动实现一个 new操作符 1. new 一个对象的详细过程:(原文地址) 首先我们看下new Person输出什么? var Person = function( ...